css 选择器
1、元素选择器（类型选择器）
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。例如：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
在xml中也可以：
xml文档：
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>
css文档：
note { font-family:Verdana, Arial; margin-left:30px; } to { font-size:28px; display: block; } from { font-size:28px; display: block; } heading { color: red; font-size:60px; display: block; } body { color: blue; font-size:35px; display: block; }
2、类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。例如：
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
语法
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：
*.important {color:red;}
如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important {color:red;}
结合元素选择器
例如：
p.important {color:red;}
h1.important {color:blue;}
CSS 多类选择器
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。
3、ID 选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。
语法
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则：
*#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
类选择器和ID 选择器的区别：
1：只能在文档中使用一次
2：不能使用 ID 词列表
3：ID 能包含更多含义
区分大小写
请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
4、属性选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：
planet[moons] {color:red;}
这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
根据具体属性值选择
例如:a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
对于xml：planet[moons="1"] {color: red;}
要求属性与属性值必须完全匹配；
根据部分属性值选择
例如：p[class~="important"] {color: red;}选择 class 文本包含 "important" 的所有图像;
与 p[class="important"]不一样，它能用于任何属性，而不只是 class。
子串匹配属性选择器
很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：
| 类型 | 描述 |
|---|---|
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
CSS 属性选择器参考手册
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
5、后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色;
再例如：
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
6、子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
选择子元素
例如：h1 > strong {color:red;}
结合后代选择器和子选择器
例如：table.company td > p
7、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
浙公网安备 33010602011771号