选择符类型
类选择符(在不同的元素上多次使用相同的CSS规则) 以"."开头.
如 .warming
{font-weight:bold;}
ID选择符(根据规范一个ID选择符在整个Web文档里只出现一次)以“#”开头，随后是名字或标签
如
#navigation {
border: 1px solid black;
padding: 40px;
}
后代选择符（Descendant selectors）
后代选择符在一行里依次相接，并且将覆盖类型选择符合类选择符的样式。比较典型的情况是有两个元素的后代选择符，其中第二个元素是第一个元素的子孙：
li a {
text-decoration: none;
}
子选择符（译注1）
子选择符意味着只有当一个元素是父元素的直接子代时，该元素才会被样式化。子选择符通常由两个类型选择符以及选择符之间的右直角括号组成，下面是一个子选择符的例子：
div > strong {
text-decoration: underline;
}
通配选择符
通配选择符仅仅以一个“*”表示，在该选择符中设定的属性会应用于所有元素（如图1-16所示）。下面的代码里，每一个元素包含的HTML文本都会被样式化为Verdana、Arial或者 sans-serif字体:
* {
font-family: Verdana, Arial, sans-serif;
}
相邻选择符注意：相邻选择符尚未得到所有的现代浏览器的支持，最经典的就是IE6。支持相邻选择符的浏览器有Mozilla、Firefox、Opera 5+ 和Safari。
相邻描述的是页面标记流里两个元素左右相邻的关系。
相邻选择符用“+”号来衔接，就像您在这看到的一样：
li + li {
font-size: 200%;
}
属性选择符（Attribute selectors）
属性选择符可以用4种方法找出有相匹配属性的元素，下面是各种方法的实例：
[属性] – 基于属性的匹配。
a[href] {
text-decoration: none;
}
无论何时，只要HTML中的a标签申明了href属性，超链接就没有下画线修饰。
[属性=值] – 基于值的匹配。
a[href="csscookbook.com"] {
text-decoration: none;
}
无论何时，只要HTML中的链接指向的是csscookbook.com，这个链接就没有下画线。
[属性~=值] – 有些元素属性中可能包含若干个值(以空格分开)，这种模式匹配属性值中包含
特定值的所有元素。
a[title~="digital"] {
text-decoration: none;
}
只要“digital”出现在a元素的title属性里，这个链接就没有下画线修饰。
[属性|=值] – 这种模式匹配属性值里包含特定值，且特定值后带有连字号的匹配。
a[href|="digital"] {
text-decoration: none;
}
和前面几种情况类似，如果a元素的href属性里带有“digital-”，这个链接就没有下画线。
伪类
有时您可能想为一些不基于名称、性质或内容的元素添加样式，这时伪类就派上用场了。以下是用伪类创造翻转效果的例子：
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: gray;
}
通过这样的设置，一个普通的链接看上去是蓝色的。当鼠标指针移动到链接上时，链接会变成红色。在点击链接的过程中，链接变成灰色。链接被点击之后，颜色将表现为紫色。
其他的3个伪类包括：:first-child、:focus和:lang(n)。
伪元素
通常，开发者需要使用选择符，并借助元素及元素在Web文档里的排布来样式化文档。然而，有时开发者可以利用伪元素，而不必再依赖元素标记来样式化Web文档里的某个条目。伪元素包括：first-letter、:first-line、:before和:after。
p:first-letter {
font-size: 200%;
font-weight: bold;
}
或者您也可以使用:first-line（如图1-20所示）样式化第一行文字。如果第一行不是一个完整的句子，或者包含了第二句话的开头，:first-line仍然只会影响第一行。
p:first-line {
font-size: 200%;
font-weight: bold;
}
选择符类型
类选择符(在不同的元素上多次使用相同的CSS规则) 以"."开头.
如 .warming
{font-weight:bold;}
ID选择符(根据规范一个ID选择符在整个Web文档里只出现一次)以“#”开头，随后是名字或标签
如
#navigation {
border: 1px solid black;
padding: 40px;
}
后代选择符（Descendant selectors）
后代选择符在一行里依次相接，并且将覆盖类型选择符合类选择符的样式。比较典型的情况是有两个元素的后代选择符，其中第二个元素是第一个元素的子孙：
li a {
text-decoration: none;
}
子选择符（译注1）
子选择符意味着只有当一个元素是父元素的直接子代时，该元素才会被样式化。子选择符通常由两个类型选择符以及选择符之间的右直角括号组成，下面是一个子选择符的例子：
div > strong {
text-decoration: underline;
}
通配选择符
通配选择符仅仅以一个“*”表示，在该选择符中设定的属性会应用于所有元素（如图1-16所示）。下面的代码里，每一个元素包含的HTML文本都会被样式化为Verdana、Arial或者 sans-serif字体:
* {
font-family: Verdana, Arial, sans-serif;
}
相邻选择符注意：相邻选择符尚未得到所有的现代浏览器的支持，最经典的就是IE6。支持相邻选择符的浏览器有Mozilla、Firefox、Opera 5+ 和Safari。
相邻描述的是页面标记流里两个元素左右相邻的关系。
相邻选择符用“+”号来衔接，就像您在这看到的一样：
li + li {
font-size: 200%;
}
属性选择符（Attribute selectors）
属性选择符可以用4种方法找出有相匹配属性的元素，下面是各种方法的实例：
[属性] – 基于属性的匹配。
a[href] {
text-decoration: none;
}
无论何时，只要HTML中的a标签申明了href属性，超链接就没有下画线修饰。
[属性=值] – 基于值的匹配。
a[href="csscookbook.com"] {
text-decoration: none;
}
无论何时，只要HTML中的链接指向的是csscookbook.com，这个链接就没有下画线。
[属性~=值] – 有些元素属性中可能包含若干个值(以空格分开)，这种模式匹配属性值中包含
特定值的所有元素。
a[title~="digital"] {
text-decoration: none;
}
只要“digital”出现在a元素的title属性里，这个链接就没有下画线修饰。
[属性|=值] – 这种模式匹配属性值里包含特定值，且特定值后带有连字号的匹配。
a[href|="digital"] {
text-decoration: none;
}
和前面几种情况类似，如果a元素的href属性里带有“digital-”，这个链接就没有下画线。
伪类
有时您可能想为一些不基于名称、性质或内容的元素添加样式，这时伪类就派上用场了。以下是用伪类创造翻转效果的例子：
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: gray;
}
通过这样的设置，一个普通的链接看上去是蓝色的。当鼠标指针移动到链接上时，链接会变成红色。在点击链接的过程中，链接变成灰色。链接被点击之后，颜色将表现为紫色。
其他的3个伪类包括：:first-child、:focus和:lang(n)。
伪元素
通常，开发者需要使用选择符，并借助元素及元素在Web文档里的排布来样式化文档。然而，有时开发者可以利用伪元素，而不必再依赖元素标记来样式化Web文档里的某个条目。伪元素包括：first-letter、:first-line、:before和:after。
p:first-letter {
font-size: 200%;
font-weight: bold;
}
或者您也可以使用:first-line（如图1-20所示）样式化第一行文字。如果第一行不是一个完整的句子，或者包含了第二句话的开头，:first-line仍然只会影响第一行。
p:first-line {
font-size: 200%;
font-weight: bold;
}
如何最有效地使用类选择符和ID选择符？
解决方法
当您要在文档中多次应用同一个样式时可以使用类选择符，如果样式只使用一次，则可以考虑ID选择符。#banner是ID选择符，.title是类选择符。
ID选择符决定了性质的唯一，这类选择符在文档树结构中只有一个实例，而类选择符在整个Web页面中可以随意地使用。ID选择符以“#”开头，类选择符以“.”开头。
扫一扫
4107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
