Html代码：
<html>
<head>
<style type="text/css">
<!--
@import url("CssSelector.css");
-->
</style>
</head>
<body>
<h2>CSS选择器演示</h2>
<hr>
说明：CSS的基本选择器有元素选择器，后代选择器(关联选择器)，Class选择器，ID选择器，伪类；<br>
高级选择器有子选择器，相邻选择器以及属性选择器。<br>
在实际使用中，通常通过各种选择器的组合使用来精确控制文档样式。<br>
注意：对于不同浏览器对于CSS选择器种类支持各有区别，一般来说基本选择器是支持的。
<hr>
<div class="headContent">
<ul>
<li id="firstItem">
<a href="#" >
阅读
</a>
</li>
<li>
<a href="#" rel="me">
发现
</a>
</li>
<li>
<a href="#" rel="you me it">
评论
</a>
</li>
<li>
<a href="#" rel="me">
小组
</a>
</li>
<li>
<a href="#">
译消息
</a>
</li>
<li>
<a href="#">
翻译
</a>
</li>
<li>
<a href="#">
自己
</a>
</li>
<li id="endItem">
<a href="#">
帮助
</a>
</li>
</ul>
</div>
</body>
CSS代码：
/*元素选择器*/
body{color:#000000;font-size:13px}
/*后代选择器*/
body h2{
color:red;
font-size:32px;
}
/*类选择器*/
.headContent{
layout-flow: horizontal;
PADDING: 6px 0px 0px 1px;
MARGIN: 4px 0px 3px 5px;
}
/*组合选择器：类选择器与后代选择器的结合使用*/
.headContent ul{
font-size:16px;
list-style-type:none;
}
.headContent li{
float:left;
margin:0px 0px 4px 4px;
padding:10px;
background-color:#c5c5c5;
}
/*伪类*/
a{
TEXT-DECORATION: none;
}
a:link{
color:blue;
}
a:visited{
color:green;
font-size:85%;
}
a:hover{
background-color:yellow;
TEXT-DECORATION: underline;
}
/*ID选择器*/
#endItem{
font-size:20px;
font-weight:bold;
}
#firstItem{
font-size:24px:
background-color:write;
}
/*子选择器*/
#endItem>a{
cursor : help;
}
/*相邻选择器*/
h2+hr{
border-style :dotted;
}
/*属性选择器:找属性rel等于me的a元素*/
a[rel="me"]{
cursor : wait;
}
/*属性选择器:找属性rel包含it的a元素*/
a[rel~="it"]{
cursor :crosshair;
}
http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html
分享到：
相关推荐
本教程将深入探讨CSS选择器的使用及其示例，帮助你更好地理解和掌握这一核心技能。 一、基础选择器 1. 类选择器：通过在HTML元素的class属性中指定的类名来选择元素，如`.myClass`。例如： ```html 这是具有....
#### 三、CSS选择器分类及示例 ##### 1. 基本选择器 - **类选择器**：`.class` 示例：`.intro` 描述：选择所有class属性为"intro"的元素。 - **ID选择器**：`#id` 示例：`#firstname` 描述：选择所有id属性...
### CSS选择器的应用 #### CSS概述与引入方式 CSS（层叠样式表）是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性，从而增强网页的表现力。CSS可以通过多种方式引入： -...
在前端开发中，CSS选择器是用于选取网页元素并应用样式的重要工具。高效的CSS选择器能够提高页面渲染速度，优化用户体验，特别是在处理大型或者复杂的页面结构时显得尤为重要。本篇文章将探讨如何使用CSS选择器来...
### CSS3 选择器详解 #### 一、概述 随着 Web 技术的不断发展，CSS3 带来了更为强大的选择器功能，极大地提升了网页设计的灵活性与效率。本篇文章将深入探讨 CSS3 选择器中的重要成员——`:nth` 选择器系列，并...
- **MDN Web Docs**：Mozilla提供的MDN Web Docs是学习CSS选择器最权威的资源之一，它包含了详尽的选择器列表、语法说明和示例。 - **W3Schools**：W3Schools提供了简单易懂的CSS选择器教程，适合初学者快速入门。 ...
【标题】：“利用css＋javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上，用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素，允许用户方便地...
总的来说，"HTML5+CSS3 城市选择器"是一个很好的示例，展示了如何结合现代Web技术来创建一个功能完善的交互组件。它不仅适用于学习者了解和实践HTML5、CSS3和JQuery的用法，同时也为开发者提供了一个可复用的组件...
通过书中的源代码示例，你可以看到如何在实际项目中运用这些选择器，从而提升你的CSS技能。 例如，书中可能会包含如下示例： - 一个网页中，不同类型的链接（内部链接、外部链接、锚点链接）通过属性选择器实现不同...
### Jquery CSS选择器详解 #### 一、引言 在网页开发中，CSS选择器是一种强大的工具，用于选择HTML文档中的元素，并应用于样式规则。本文将深入探讨Jquery CSS选择器的重要特性，特别是属性选择器、子选择器以及...
在现代Web开发中，CSS3（层叠样式表第三版）的选择器是前端开发者不可或缺的工具之一。通过灵活运用各种CSS3选择器，开发者能够更高效地定位元素、实现复杂多样的样式效果，从而提高网站的用户体验。本文将详细介绍...
通过以上介绍可以看出，CSS选择器为开发者提供了强大的工具来控制页面元素的样式。无论是简单的标签选择器还是复杂的组合选择器，每种选择器都有其独特的作用和适用场景。正确理解和灵活运用这些选择器能够帮助我们...
### CSS选择器详解 在网页开发中，CSS（层叠样式表）是用于定义HTML元素如何显示的关键技术之一。通过CSS，我们可以控制页面布局、颜色、字体等视觉表现。而CSS选择器则是用来选取HTML元素并为其应用样式的工具。...
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
CSS3引入了更强大的选择器，如属性选择器、伪类选择器和兄弟选择器，允许开发者更加精确地控制元素的样式。例如，`:nth-child()`可以选取特定顺序的子元素，`[attr=value]`能够根据属性值选择元素，而`~`和`+`则可...
**CSS选择器和属性：** - **选择器**：如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）和伪类选择器（`:hover`, `:active`, `:focus`等）。 - **属性**：包括`color`、`font-size`、`...
2. **选择器类型**：CSS选择器包括标签选择器、类选择器、ID选择器、伪类和伪元素等。理解如何使用这些选择器可以更精确地定位并应用样式。 3. **盒模型**：CSS盒模型描述了元素如何占据空间，包括内容区域、内边距...
1. **选择器与声明**：CSS的核心是选择器和声明。选择器定位HTML元素，声明则定义元素的样式。例如： ```css p { color: red; font-size: 16px; } ``` 这段代码选择了所有的`<p>`标签，并设置了文本颜色为...
CSS的优先级是根据选择器的特异性来决定的，ID选择器（#）、类选择器（.）、元素选择器（元素名）和行内样式（style属性）的优先级依次递减。当样式冲突时，优先级高的样式会覆盖低优先级的。 4. **通配符选择器...