CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。
避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS选择器,它们可以定位于指定的元素而不用使用额外的class或id,而且通过这种方式也可以让我们的代码和样式更加灵活。
一、基本选择器
选择器 | 描述 | CSS版本 |
E | 标签选择器,匹配所有使用E标签的元素 | |
* | 通用元素选择器,匹配任何元素 | |
.info | class选择器,匹配所有class属性中包含info的元素 | |
#footer | id选择器,匹配所有id属性等于footer的元素 | |
比如:
1
*
{
margin
:
0
;
padding
:
0
;
}
2
3
p
{
font-size
:
2em
;
}
4
5
.info
{
background
:
#ff0
;
}
6
7
p.info
{
background
:
#ff0
;
}
8
9
p.info.error
{
color
:
#900
;
font-weight
:
bold
;
}
10
11
p#info
{
background
:
#ff0
;
}
二、多元素的组合选择器
选择器 | 描述 | CSS版本 |
E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号隔开 | |
E F | 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 | |
E>F | 子元素选择器,匹配所有E元素的儿子元素F | |
E+F | 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F | |
E~F | 匹配任何E标签之后的同级F标签 | 3 |
比如:
1
div,p
{
color
:
#f00
;
}
2
#nav,li
{
display
:
inline
;
}
3
#nav a
{
font-weight
:
bold
;
}
4
div>strong
{
color
:
#f00
;
}
5
p+p
{
color
:
#f00
;
}
6
p~ul
{
color
:
#f00
;
}
1、并列选择器(E,F,G,...)
这类选择器之间用逗号作分割,能匹配选择器列出的所有标签元素。
2、后代选择器(E F; E>F)
E F,标签之间用空格隔开,表示匹配E标签内所有F标签,所匹配的F标签不仅仅是E标签的儿子,还有可能是E标签的孙子,或者曾孙、从孙等等。
E>F标签匹配所有为E标签儿子的F标签。
3、兄弟选择器(E+F;E~F)
E~F选择其中F标签无需紧紧跟随E标签后面第一个,如果需要实现这样的一个功能可以用E+F选择器。对于IE浏览器来说只有IE6以上的版本才支持该选择器。
三、属性选择器
选择器 | 描述 | CSS版本 |
E[attribute] | 匹配所有具有attribute属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) | 2.1 |
E[attribute=value] | 匹配所有attribute属性等于“value”的E元素 | 2.1 |
E[attribute~=value] | 匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素 | 2.1 |
E[attribute|=value] | 匹配这类E元素,它具有attribute属性的就是“value”或者以“value”开始并立即跟上一个“-”字符,也就是“value-”,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等 | 2.1 |
E[attribute^=value] | 匹配所有attribute属性值是以“value”开始的E元素 | 3 |
E[attribute$=value] | 匹配所有attribute属性值包含有“value”的E元素 | 3 |
E[attribute*=value] | 匹配所有attribute属性值是以"value"结束的E元素 | 3 |
比如:
CSS
1
p[title]
{
color
:
#f00
;
}
2
3
div[class=error]
{
color
:
#f00
;
}
4
5
td[headers~=col1]
{
color
:
#f00
;
}
6
7
p[lang|=en]
{
color
:
#f00
;
}
8
9
blockquote[class=quote][cite]
{
color
:
#f00
;
}
10
11
div[id^="nav"]
{
background
:
#ff0
;
}
12
13
div[id$="nav"]
{
background
:
#ff0
;
}
14
15
16
a[href*=".jpg"]
{
17
background
:
url(jpeg.gif) no-repeat left 50%
;
18
padding
:
2px 0 2px 20px
;
19
}
20
四、伪类选择器
选择器 | 描述 | CSS版本 |
E:first-child | 匹配父元素的第一个子元素E | 2.1 |
E:link | 匹配所有未被点击的链接 | 2.1 |
E:visited | 匹配所有已被点击的链接 | 2.1 |
E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | 2.1 |
E:hover | 匹配鼠标悬停其上的E元素 | 2.1 |
E:focus | 匹配获得当前焦点的E元素 | 2.1 |
E:lang(c) | 匹配lang属性等于c的E元素 | 2.1 |
E:enabled | 匹配表单中激活的元素 | 3 |
E:disabled | 匹配表单中禁用的元素 | 3 |
E:checked | 匹配表单中被选中的radio或者checkbox元素 | 3 |
E::selection | 匹配用户当前选中的元素 | 3 |
E:root | 匹配文档的根元素,对于HTML文档,就是HTML元素 | 3 |
E:nth-child(n) | 匹配其父元素的第n个子元素,n从1开始计算 | 3 |
E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素,第一个编号为1 | 3 |
E:nth-of-type(n) | 与:nth-child(n)作用类似,用作匹配使用同种标签的第n个元素 | 3 |
E:nth-last-of-type | 与:nth-last-child作用类似,用作匹配同种标签的最后一个元素 | 3 |
E:last-child | 匹配父元素的最后一个子元素,等同于E:nth-last-child(1) | 3 |
E:first-of-type | 匹配父元素下使用同种标签的第一个元素,等同于E:nth-of-type(1) | 3 |
E:last-of-type | 匹配父元素下使用同种标签的最后一个元素,等同于E:nth-last-of-type(1) | 3 |
E:only-child | 匹配父元素下仅有的一个子元素,等同于E:first-child:last-child或者E:nth-child(1):nth-last-child(1) | 3 |
E:only-of-type | 匹配父元素下使用相同标签的唯一一个子元素,等同于E:first-of-type:last-of-type或者E:nth-of-type(1):nth-last-of-type(1) | 3 |
E:empty | 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 | 3 |
E:not(s) | 匹配不符合当前选择器的任何E标签元素 | 3 |
E:target | 匹配文档中特定“id”点击后的效果 | 3 |
1、E:first-child
您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素(也就是第11行的p,不是strong元素):
1
<
html
>
2
<
head
>
3
<
style
type
="text/css"
>
4
p:first-child
5
{
6
color
:
red
;
7
}
8
</
style
>
9
</
head
>
10
<
body
>
11
<
p
>
123123
<
strong
>
some text
</
strong
></
p
>
12
<
p
>
some text
</
p
>
13
</
body
>
14
</
html
>
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。对于IE浏览器,必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE6+ 中生效。还有一个问题就是,有时候会创建一个aspx文件,如下:
HTML
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default21.aspx.cs
"
Inherits
=
"
Default21
"
%>
2
3
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
4
5
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
6
<
head
runat
="server"
>
7
<
title
></
title
>
8
<
style
type
="text/css"
>
9
p:first-child
10
{
11
background-color
:
Red
;
12
}
13
</
style
>
14
</
head
>
15
<
body
>
16
<
form
id
="form1"
runat
="server"
>
17
<
p
>
18
123123123123123123
19
</
p
>
20
</
form
>
21
</
body
>
22
</
html
>
运行起来发现字体颜色并不是红色,为什么呢?其实这个p不是第一个元素。我们可以查看一下页面运行起来后生成的Html,这样问题就清楚了。
HTML
1
2
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
3
4
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
5
<
head
><
title
>
6
7
</
title
>
8
<
style
type
="text/css"
>
9
p:first-child
10
{
11
background-color
:
Red
;
12
}
13
</
style
>
14
</
head
>
15
<
body
>
16
<
form
name
="form1"
method
="post"
action
="Default21.aspx"
id
="form1"
>
17
<
div
>
18
<
input
type
="hidden"
name
="__VIEWSTATE"
id
="__VIEWSTATE"
value
="/wEPDwULLTE2MTY2ODcyMjlkZK7s3d9MopxNO2l9SJNVyVvw+Q5v"
/>
19
</
div
>
20
21
<
p
>
22
123123123123123123
23
</
p
>
24
</
form
>
25
</
body
>
26
</
html
2、动态伪类
所谓的动态伪类,是指它们并不存在HTML中,而是只有当用户和网站交互的时候才会呈现。E:link, E:visited, E:hover, E:active 和 E:focus都属于这类,前面四种又称之锚伪类。
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。伪类名称对大小写不敏感。
动态伪类被所有的现代浏览器支持,甚至IE6。但是请注意,对于IE系列浏览器来说,IE6只允许:hover 伪类应用于链接元素(a标签),而且只有IE8才接受应用于非a标签的:active状态。
CSS
1
a:link
{
color
:
#FF0000
}
/*
未访问的链接
*/
2
a:visited
{
color
:
#00FF00
}
/*
已访问的链接
*/
3
a:hover
{
color
:
#FF00FF
}
/*
鼠标移动到链接上
*/
4
a:active
{
color
:
#0000FF
}
/*
选定的链接
*/
5
input:hover
{
background-color
:
blue
}
/*
只有在IE6+或者Firefox上才起作用
*/
6
input:active
{
background-color
:
green
}
/*
只有在IE8或者Firefox上才起作用
*/
3、:lang伪类
语言伪类:lang 使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:
1
<
html
>
2
<
head
>
3
4
<
style
type
="text/css"
>
5
q:lang(no)
6
{
7
quotes
:
"~" "~"
8
}
9
</
style
>
10
11
</
head
>
12
13
<
body
>
14
<
p
>
文字
<
q
lang
="no"
>
段落中的引用的文字
</
q
>
文字
</
p
>
15
</
body
></
html
>
4、UI元素状态伪类
有些HTML元素有enable 或disabled 状态(比如,文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled或:checked伪类来分别定位。
1
input:enabled
2
{
3
background-color
:
Red
;
4
}
5
input:disabled
6
{
7
background-color
:
Yellow
;
8
}
9
input[type="checkbox"]:checked
{
10
margin-left
:
15px
;
11
}
这类型的选择除了IE浏览器不支持外,其他的浏览器都支持。
5、E::Selection
目前没有任何一款IE或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
1
div:selection
2
{
3
background-color
:
Green
;
4
}
6、结构伪类选择器
这类选择器包括有E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type 和 E:empty。Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器支持这些选择器。
CSS
1
p:nth-child(3)
{
color
:
#f00
;
}
2
3
p:nth-child(odd)
{
color
:
#f00
;
}
4
5
p:nth-child(even)
{
color
:
#f00
;
}
6
7
p:nth-child(3n+0)
{
color
:
#f00
;
}
8
9
p:nth-child(3n)
{
color
:
#f00
;
}
10
11
tr:nth-child(2n+11)
{
background
:
#ff0
;
}
12
13
tr:nth-last-child(2)
{
background
:
#ff0
;
}
14
15
p:last-child
{
background
:
#ff0
;
}
16
17
p:only-child
{
background
:
#ff0
;
}
18
19
p:empty
{
background
:
#ff0
;
}
7、否定选择器
否定选择器:not(),可以让你定位不匹配该选择器的元素
比如,如果你需要定义表单元素中的input元素,但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式,以看起来像按钮:
1
input:not([type="submit"])
2
{
3
width
:
200px
;
4
padding
:
3px
;
5
border
:
1px solid #000000
;
6
}
IE浏览器不支持这个选择器。
8、:target选择器
当你使用锚点(片段标识符 fragment identifier)的时候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments,这“#comments”就是一个片段标识符,你就可以使用:target伪类来控制目标的样式。
举个例子,比如你有一个很长的使用了很多文字和h2标题的页面,然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时,相应的标题以某种方式高亮,然后滚动到相应的位置,对读者就会很有用。很简单。
HTML
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default.aspx.cs
"
Inherits
=
"
_Default
"
%>
2
3
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
4
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
5
<
head
runat
="server"
>
6
<
title
></
title
>
7
<
style
>
8
:target
9
{
10
background-color
:
red
11
}
12
</
style
>
13
</
head
>
14
<
body
>
15
<
form
id
="form1"
runat
="server"
>
16
<
a
href
="#label"
>
Text to be displayed
</
a
>
17
<
h2
>
123
<
a
name
="label"
>
myanchor
</
a
>
123123123
</
h2
>
18
</
form
>
19
</
body
>
20
</
html
>
IE浏览器完全不支持:target伪类,另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。
五、伪元素选择器
选择器 | 描述 | CSS版本 |
E:first-line | 匹配所有E标签内的第一行 | 2.1 |
E:first-letter | 匹配所有E标签内的第一个字母 | 2.1 |
E:before | 在E标签之前插入生成的内容 | 2.1 |
E:after | 在E标签之后插入生成的内容 | 2.1 |
1、:first-line伪元素
"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式:
1
p {font-size: 12pt}
2
p:first-line {color: #0000FF; font-variant: small-caps}
3
4
<
p
>
Some text that ends up on two or more lines
</
p
>
5
在上面的例子中,浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。first-line 伪元素仅能被用于块级元素。
2、:first-letter伪元素
first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式:
1
p {font-size: 12pt}
2
p:first-letter {font-size: 200%; float: left}
3
4
<
p
>
The first words of an article.
</
p
>
3、:before和:after伪元素
before 伪元素可用于在某个元素之前插入某些内容。after 伪类可用于在某个元素之后插入某些内容。这两个伪元素常常只使用content属性,来添加一些短语或排版元素。
1
p:before
2
{
3
content
:
"Before P"
;
4
}
5
p:after
6
{
7
content
:
"After P."
;
8
}
其实还有一个用法就是用作计数:
Html
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
<
html
>
3
<
head
>
4
<
style
type
="text/css"
>
5
body
{
counter-reset
:
section
;
}
6
h1
{
counter-reset
:
subsection
;
}
7
h1:before
8
{
9
counter-increment
:
section
;
10
content
:
"Section " counter(section) ". "
;
11
}
12
h2:before
13
{
14
counter-increment
:
subsection
;
15
content
:
counter(section) "." counter(subsection) " "
;
16
}
17
</
style
>
18
</
head
>
19
20
<
body
>
21
22
<
p
><
b
>
注释:
</
b
>
如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 counter-increment 属性。
</
p
>
23
24
<
h1
>
HTML tutorials
</
h1
>
25
<
h2
>
HTML Tutorial
</
h2
>
26
<
h2
>
XHTML Tutorial
</
h2
>
27
<
h2
>
CSS Tutorial
</
h2
>
28
29
<
h1
>
Scripting tutorials
</
h1
>
30
<
h2
>
JavaScript
</
h2
>
31
<
h2
>
VBScript
</
h2
>
32
33
<
h1
>
XML tutorials
</
h1
>
34
<
h2
>
XML
</
h2
>
35
<
h2
>
XSL
</
h2
>
36
37
</
body
>
38
</
html
>
39
当然,Firefox支持这两个伪元素;对于IE浏览器,如果已规定 !DOCTYPE,那么 IE8 (以及更高版本)才支持。