CSS学习之二 选择器
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
1、元素选择器：往往是HTML元素，也可能是XML定义的元素，举例：
复制代码代码如下:
h1 {color:red;}/* 元素选择器 */
h2 {font:normal 12px/16px "Courier New",Arial;}/* css关键字由空格隔开，只有font属性中字体大小和行高可用“/”分割 */
h3,p {background-color:#EEE;}/* 选择器的分组 */
2、通配选择器，它为页面中所有元素添加样式，就像是一个通配符，举例：
复制代码代码如下:
* {color:blue;}/* 通配选择器，等价于列出了文档中所有元素的color属性均为blue，它的优先级很低 */
*.p {font-weight:bold;}/* 类选择器，运用到所有类为p的元素上，可以忽略(*)号，等价于.p */
3、类选择器：多的不废话，说一下多类选择器吧，举例：
有如下HTML代码：
复制代码代码如下:
<p class="p">This is a paragraph</p><!-- 类选择符 -->
<div class="p">This is a div element</div><!-- 类选择符 -->
<p class="urgent warning">This is a paragraph</p><!-- 多类选择符，一个class可以包含一个词列表，各个词之间用空格隔开 -->
<p class="urgent warning help">Those words's background-color is red too in all browser!</p><!-- 多类选择符，.waring.urgent选择器将不能匹配这里的p -->
<p class=" help ie6">Those words's background-color is red in browser ie6!</p><!-- 多类选择符，由于help在选择器中最后出现，所以在IE6中背景为红色的 -->
<p class="help">Those words's background-color is red in browser ie6!</p><!-- 类选择符，由于help在选择器中最后出现，所以在IE6中背景为红色的 -->
<p>This is a paragraph<span class="warning"> But this is a span element</span></p>
CSS风格如下：
复制代码代码如下:
p.p {font-style:italic;}/* 类选择器，选择段落且类为p时才显示粗体 */
.waring {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background-color:silver;}/* 类选择器，选择同时包含waring和urgent两个类的元素，且出现的顺序可以和定义class时不同 */
p.warning.urgent.help {background-color:red;}/* 类选择器，选择同时包含waring,urgent和help三个类的p元素，但是在IE6中此选择符匹配class属性中包含help的所有p元素 */
在非IE6下面，CSS里如果有.warning.urgent.help这类的选择器，它只匹配同时包含waring,urgent和help三个类的HTML元素，而HTML中诸如class="urgent warning help"这类的选择器却可以匹配CSS中多种样式；而在IE6下却不同，这一点是很值得注意的。
4、ID选择器：比起类选择器来说，ID选择器不会那么复杂，ID属性不允许有以空格分隔的词列表，比如以下的写法是不对的：
复制代码代码如下:
<div id="div1 div2">...</div><!-- 这种写法是不对的 -->
无论CSS怎么写，样式都会无效。可是，ID选择符与类选择符是可以结合使用的，如下：
复制代码代码如下:
#div.div {color:red;}/* ID选择器与类选择器的结合，可以这么写的，且先后顺序可以颠倒 */
匹配即声明ID为div又声明属于div这个类的HTML元素。
还有要补充一点，既然使用了ID选择符，那么就只能对一种元素中的一个元素使用ID，比如下面的写法就不对：
复制代码代码如下:
<h1 id="important">important</h1>
<em id="important">important</em>
<ul id="important">important</ul>
这三种（个）元素具有相同的ID，在同一个文档中不能够同时出现，这也体现出ID的唯一性。
5、属性选择符：目前遗憾的是属性选择器没有被IE6识别，而IE7及以上IE系列支持大多数CSS2.1属性选择器。
简单的属性选择符实例：
复制代码代码如下:
a[href] {color:yellow;}/* 简单的属性选择符，匹配所有具有href属性的a元素 */
*[title] {font-weight:bold;}/* 简单的属性选择符，匹配所有具有title属性的元素 */
a[href][title] {color:red;}/* 简单的属性选择符，匹配所有有title属性且有href属性的的a元素 */
下面是根据具体属性值选择：
复制代码代码如下:
a[href="../chemdemo/"] {color:yellow;}/* 根据具体属性值选择，匹配链接为“../chemdemo/”的a标签 */
p[class="urgent warning"] {font-weight:bold;}/* 根据具体属性值选择，要求属性值必须完全匹配，写成class="urgent"或其他是不对的 */
上例中，p[class="urgent warning"]严格匹配具有 class="urgent warning"类的p元素，urgent与warning的顺序不颠倒。
下面是根据部分属性值选择：对于class="urgent warning"这个类，CSS可以这样写：
复制代码代码如下:
p[class~="warning"] {color:red;}/* 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择相应的p元素 */
[class~="urgent"] {color:grey;}/* 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择 */
当然不仅仅只局限于class属性，任何属性都可以使用属性选择符，比如选择器img[title~="Figure"]会匹配title值为含有“空格和Figure”的图像。
还有以下几种子串匹配属性选择器：
复制代码代码如下:
[class^="cl"] {}/* 子串匹配属性选择器，“^=”匹配class属性的值以cl开头的元素 */
[class$="dy"] {}/* 子串匹配属性选择器，“$=”匹配class属性的值以dy结尾的元素 */
[class*="ou"] {}/* 子串匹配属性选择器，“*=”匹配class属性的值还有ou的元素 */
最后一种属性选择器是特定属性选择类型，例子如下：
复制代码代码如下:
*[lang|="en"] {}/* 选择lang属性为en或以en-开头的所有元素 */
img[src|="figure"] {}/* 可以用来选择图片名为“figure-”的系列图片 */
6、根据HTML标签的嵌套关系选择元素：
一种是选择后代元素：
复制代码代码如下:
h4 em {}/* 为h4元素的后代em元素添加样式 */
ul ol li em {}/* 后代选择器，不局限于两个选择器 */
一种是选择子元素：
加入有HTML代码：
复制代码代码如下:
<h2>This is <strong>very</strong> important.</h2><!-- strong元素是h2的子元素、后代元素 -->
<h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong元素是h2的后代元素而非子元素 -->
那么下面的CSS将使前面的“very”以粗体显示：
复制代码代码如下:
h2 > strong {color:red;}/* 选择作为h2元素的所有子元素中的strong元素 */
还有一种是选择相邻兄弟元素：当不想选择所有后代元素时，可用选择相邻兄弟元素的办法缩小选取范围：
复制代码代码如下:
h2 + p {}/* 选择紧跟在h2后面的p元素（注意是对p添加样式），它们是兄弟元素（必须有相同的父元素）*/
html > body tabke + ul {}/* 多种选择符的结合运用 */
注：IE6不支持子选择器和相邻选择器。
7、伪类：
只运用于链接得伪类有两个：“:link”和“:visited”，相信了解CSS的人都不陌生，这里不再举例；
动态伪类：在CSS2.1中包括三种：“:focus”、“:hover”和“:active”，在Web页面中常用的方式是与静态伪类结合：
复制代码代码如下:
a:link {}
a:visited {}
a:hover {}
a:active {}
伪类顺序很重要，个人的记忆方法为love-hate（爱与恨）。
动态伪类可以运用到任何元素，比如：
复制代码代码如下:
input:focus {background:#DDD;}/* 突出显示一个有输入焦点的表单元素 */
*:hover {background:gray;}/* 从body元素继承的所有元素在指针停留时会显示灰色背景 */
如果要选择元素的第一个子元素，可以用“:first-child”静态伪类：
CSS样式：
复制代码代码如下:p:first-child,li:first-child {background:#CCC;}
HTML代码：
复制代码代码如下:
<div>
<p>p1</p><!-- 背景为灰色 -->
<p>p2</p>
<ul>
<li>1</li><!-- 背景为灰色 -->
<li>2</li>
<li>3</li>
</ul>
</div>
注意：IE6不支持“:first-child”静态伪类。
下面是关于结合伪类的用法：
复制代码代码如下:
a:link:hover {color:red;}/* 顺序可交换，即可以为a:hover:link，IE6中只会注意:hover而忽略：link部分 */
a:visited:hover {color:maroon;}/* 顺序可交换，IE6中只会注意:hover而忽略：link部分 */
上面的样式可以实现鼠标指针停留在未访问链接上时，链接为红色，当停留在已访问过的链接上时，颜色为紫红色。
还可以根据语言来选择，即使用:lang为类：
复制代码代码如下:
*:lang(fr) {font-style:italic;}/* 把法语元素变成斜体 */
更多语言代码请查阅CSS手册。
此外，还有:first、:left:、right三种伪类，它们仅用于@page规则，例如：
复制代码代码如下:
@page :right { margin: 4cm }/* 设置页面容器位于装订线右边的所有页面使用的样式 */
@page :first {}/* 设置页面容器第一页使用的样式 */
8、伪元素：CSS2.1中有:first-letter、:first-line、:before、:after四种伪元素，实例：
复制代码代码如下:
p {width:500px;}/* 使用:first-line前先设置元素宽度，如果未指定对象的width属性，首行的内容长度随窗口宽度而定 */
p:first-line {color:red;}/* 不管是否设置了p的宽度，p元素内第一段文字总是以红色显示 */
p:first-letter {font-size:2em;}
h2:before {content:"{";color:green;}/* 在h2元素的内容前面添加了一个“{”符号，并且颜色为绿色 */
h2:after {content:"}";color:green;}/* 在h2元素的内容后面添加了一个“}”符号，并且颜色为绿色 */
h3:after {content:"END";color:red;}/* 非IE6浏览器中，h3元素最后会添加红色的的“END”单词 */
span:before {content:"s";color:red;}/* 非IE6浏览器中，span前面会添加一个红色的“s” */
span:first-letter {color:green;font-size:40px;}/* span元素的第一个单词不会变成绿色，大小为默认值 */
span {position:absolute;}/* 对span使用绝对定位后，第一个字母变为绿色，大小为40px */
得出的结论是：
1）IE6支持:first-line和:first-letter伪元素，不支持:after和:before伪元素；
2）:first-line和:first-letter只能用于块级元素，:after和:before适合块级和行内元素；
3）行内元素设置设定position属性为absolute,或者设定display属性为block后，:first-line和:first-letter有效。
复制代码代码如下:
h1 {color:red;}/* 元素选择器 */
h2 {font:normal 12px/16px "Courier New",Arial;}/* css关键字由空格隔开，只有font属性中字体大小和行高可用“/”分割 */
h3,p {background-color:#EEE;}/* 选择器的分组 */
2、通配选择器，它为页面中所有元素添加样式，就像是一个通配符，举例：
复制代码代码如下:
* {color:blue;}/* 通配选择器，等价于列出了文档中所有元素的color属性均为blue，它的优先级很低 */
*.p {font-weight:bold;}/* 类选择器，运用到所有类为p的元素上，可以忽略(*)号，等价于.p */
3、类选择器：多的不废话，说一下多类选择器吧，举例：
有如下HTML代码：
复制代码代码如下:
<p class="p">This is a paragraph</p><!-- 类选择符 -->
<div class="p">This is a div element</div><!-- 类选择符 -->
<p class="urgent warning">This is a paragraph</p><!-- 多类选择符，一个class可以包含一个词列表，各个词之间用空格隔开 -->
<p class="urgent warning help">Those words's background-color is red too in all browser!</p><!-- 多类选择符，.waring.urgent选择器将不能匹配这里的p -->
<p class=" help ie6">Those words's background-color is red in browser ie6!</p><!-- 多类选择符，由于help在选择器中最后出现，所以在IE6中背景为红色的 -->
<p class="help">Those words's background-color is red in browser ie6!</p><!-- 类选择符，由于help在选择器中最后出现，所以在IE6中背景为红色的 -->
<p>This is a paragraph<span class="warning"> But this is a span element</span></p>
CSS风格如下：
复制代码代码如下:
p.p {font-style:italic;}/* 类选择器，选择段落且类为p时才显示粗体 */
.waring {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background-color:silver;}/* 类选择器，选择同时包含waring和urgent两个类的元素，且出现的顺序可以和定义class时不同 */
p.warning.urgent.help {background-color:red;}/* 类选择器，选择同时包含waring,urgent和help三个类的p元素，但是在IE6中此选择符匹配class属性中包含help的所有p元素 */
在非IE6下面，CSS里如果有.warning.urgent.help这类的选择器，它只匹配同时包含waring,urgent和help三个类的HTML元素，而HTML中诸如class="urgent warning help"这类的选择器却可以匹配CSS中多种样式；而在IE6下却不同，这一点是很值得注意的。
4、ID选择器：比起类选择器来说，ID选择器不会那么复杂，ID属性不允许有以空格分隔的词列表，比如以下的写法是不对的：
复制代码代码如下:
<div id="div1 div2">...</div><!-- 这种写法是不对的 -->
无论CSS怎么写，样式都会无效。可是，ID选择符与类选择符是可以结合使用的，如下：
复制代码代码如下:
#div.div {color:red;}/* ID选择器与类选择器的结合，可以这么写的，且先后顺序可以颠倒 */
匹配即声明ID为div又声明属于div这个类的HTML元素。
还有要补充一点，既然使用了ID选择符，那么就只能对一种元素中的一个元素使用ID，比如下面的写法就不对：
复制代码代码如下:
<h1 id="important">important</h1>
<em id="important">important</em>
<ul id="important">important</ul>
这三种（个）元素具有相同的ID，在同一个文档中不能够同时出现，这也体现出ID的唯一性。
5、属性选择符：目前遗憾的是属性选择器没有被IE6识别，而IE7及以上IE系列支持大多数CSS2.1属性选择器。
简单的属性选择符实例：
复制代码代码如下:
a[href] {color:yellow;}/* 简单的属性选择符，匹配所有具有href属性的a元素 */
*[title] {font-weight:bold;}/* 简单的属性选择符，匹配所有具有title属性的元素 */
a[href][title] {color:red;}/* 简单的属性选择符，匹配所有有title属性且有href属性的的a元素 */
下面是根据具体属性值选择：
复制代码代码如下:
a[href="../chemdemo/"] {color:yellow;}/* 根据具体属性值选择，匹配链接为“../chemdemo/”的a标签 */
p[class="urgent warning"] {font-weight:bold;}/* 根据具体属性值选择，要求属性值必须完全匹配，写成class="urgent"或其他是不对的 */
上例中，p[class="urgent warning"]严格匹配具有 class="urgent warning"类的p元素，urgent与warning的顺序不颠倒。
下面是根据部分属性值选择：对于class="urgent warning"这个类，CSS可以这样写：
复制代码代码如下:
p[class~="warning"] {color:red;}/* 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择相应的p元素 */
[class~="urgent"] {color:grey;}/* 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择 */
当然不仅仅只局限于class属性，任何属性都可以使用属性选择符，比如选择器img[title~="Figure"]会匹配title值为含有“空格和Figure”的图像。
还有以下几种子串匹配属性选择器：
复制代码代码如下:
[class^="cl"] {}/* 子串匹配属性选择器，“^=”匹配class属性的值以cl开头的元素 */
[class$="dy"] {}/* 子串匹配属性选择器，“$=”匹配class属性的值以dy结尾的元素 */
[class*="ou"] {}/* 子串匹配属性选择器，“*=”匹配class属性的值还有ou的元素 */
最后一种属性选择器是特定属性选择类型，例子如下：
复制代码代码如下:
*[lang|="en"] {}/* 选择lang属性为en或以en-开头的所有元素 */
img[src|="figure"] {}/* 可以用来选择图片名为“figure-”的系列图片 */
6、根据HTML标签的嵌套关系选择元素：
一种是选择后代元素：
复制代码代码如下:
h4 em {}/* 为h4元素的后代em元素添加样式 */
ul ol li em {}/* 后代选择器，不局限于两个选择器 */
一种是选择子元素：
加入有HTML代码：
复制代码代码如下:
<h2>This is <strong>very</strong> important.</h2><!-- strong元素是h2的子元素、后代元素 -->
<h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong元素是h2的后代元素而非子元素 -->
那么下面的CSS将使前面的“very”以粗体显示：
复制代码代码如下:
h2 > strong {color:red;}/* 选择作为h2元素的所有子元素中的strong元素 */
还有一种是选择相邻兄弟元素：当不想选择所有后代元素时，可用选择相邻兄弟元素的办法缩小选取范围：
复制代码代码如下:
h2 + p {}/* 选择紧跟在h2后面的p元素（注意是对p添加样式），它们是兄弟元素（必须有相同的父元素）*/
html > body tabke + ul {}/* 多种选择符的结合运用 */
注：IE6不支持子选择器和相邻选择器。
7、伪类：
只运用于链接得伪类有两个：“:link”和“:visited”，相信了解CSS的人都不陌生，这里不再举例；
动态伪类：在CSS2.1中包括三种：“:focus”、“:hover”和“:active”，在Web页面中常用的方式是与静态伪类结合：
复制代码代码如下:
a:link {}
a:visited {}
a:hover {}
a:active {}
伪类顺序很重要，个人的记忆方法为love-hate（爱与恨）。
动态伪类可以运用到任何元素，比如：
复制代码代码如下:
input:focus {background:#DDD;}/* 突出显示一个有输入焦点的表单元素 */
*:hover {background:gray;}/* 从body元素继承的所有元素在指针停留时会显示灰色背景 */
如果要选择元素的第一个子元素，可以用“:first-child”静态伪类：
CSS样式：
复制代码代码如下:p:first-child,li:first-child {background:#CCC;}
HTML代码：
复制代码代码如下:
<div>
<p>p1</p><!-- 背景为灰色 -->
<p>p2</p>
<ul>
<li>1</li><!-- 背景为灰色 -->
<li>2</li>
<li>3</li>
</ul>
</div>
注意：IE6不支持“:first-child”静态伪类。
下面是关于结合伪类的用法：
复制代码代码如下:
a:link:hover {color:red;}/* 顺序可交换，即可以为a:hover:link，IE6中只会注意:hover而忽略：link部分 */
a:visited:hover {color:maroon;}/* 顺序可交换，IE6中只会注意:hover而忽略：link部分 */
上面的样式可以实现鼠标指针停留在未访问链接上时，链接为红色，当停留在已访问过的链接上时，颜色为紫红色。
还可以根据语言来选择，即使用:lang为类：
复制代码代码如下:
*:lang(fr) {font-style:italic;}/* 把法语元素变成斜体 */
更多语言代码请查阅CSS手册。
此外，还有:first、:left:、right三种伪类，它们仅用于@page规则，例如：
复制代码代码如下:
@page :right { margin: 4cm }/* 设置页面容器位于装订线右边的所有页面使用的样式 */
@page :first {}/* 设置页面容器第一页使用的样式 */
8、伪元素：CSS2.1中有:first-letter、:first-line、:before、:after四种伪元素，实例：
复制代码代码如下:
p {width:500px;}/* 使用:first-line前先设置元素宽度，如果未指定对象的width属性，首行的内容长度随窗口宽度而定 */
p:first-line {color:red;}/* 不管是否设置了p的宽度，p元素内第一段文字总是以红色显示 */
p:first-letter {font-size:2em;}
h2:before {content:"{";color:green;}/* 在h2元素的内容前面添加了一个“{”符号，并且颜色为绿色 */
h2:after {content:"}";color:green;}/* 在h2元素的内容后面添加了一个“}”符号，并且颜色为绿色 */
h3:after {content:"END";color:red;}/* 非IE6浏览器中，h3元素最后会添加红色的的“END”单词 */
span:before {content:"s";color:red;}/* 非IE6浏览器中，span前面会添加一个红色的“s” */
span:first-letter {color:green;font-size:40px;}/* span元素的第一个单词不会变成绿色，大小为默认值 */
span {position:absolute;}/* 对span使用绝对定位后，第一个字母变为绿色，大小为40px */
得出的结论是：
1）IE6支持:first-line和:first-letter伪元素，不支持:after和:before伪元素；
2）:first-line和:first-letter只能用于块级元素，:after和:before适合块级和行内元素；
3）行内元素设置设定position属性为absolute,或者设定display属性为block后，:first-line和:first-letter有效。
下一篇：CSS学习之一 CSS样式引入方法