CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。
避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS选择器,它们可以定位于指定的元素而不用使用额外的class或id,而且通过这种方式也可以让我们的代码和样式更加灵活。
二、多元素的组合选择器
选择器 |
描述 |
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 |
比如:
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文件,如下:
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,这样问题就清楚了。
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状态。
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 均支持。
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 在其最新版本的浏览器支持这些选择器。
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标题的页面,然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时,相应的标题以某种方式高亮,然后滚动到相应的位置,对读者就会很有用。很简单。
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 }
其实还有一个用法就是用作计数:
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 (以及更高版本)才支持。