当前位置:首页 >> 网页制作

CSS学习之二 选择器

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有效。