点评：2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。今天就介绍css3选择器的使用方法
css3属性选择器bVYHTML5中文学习网 - HTML5先行者学习网
css3之属性选择器，其中包括：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网
1.[att=val]bVYHTML5中文学习网 - HTML5先行者学习网
2.[att*=val]bVYHTML5中文学习网 - HTML5先行者学习网
3.[att^=val]bVYHTML5中文学习网 - HTML5先行者学习网
4.[att$=val]bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网下面我将用实例演示它们的用法bVYHTML5中文学习网 - HTML5先行者学习网
css代码：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">bVYHTML5中文学习网 - HTML5先行者学习网
p[id=p_name] {color:red;}bVYHTML5中文学习网 - HTML5先行者学习网
p[id*=p] {border:1px solid #DDD;}bVYHTML5中文学习网 - HTML5先行者学习网
p[id^=start] {font-weight:700}bVYHTML5中文学习网 - HTML5先行者学习网
p[id$=end] {background:yellow}bVYHTML5中文学习网 - HTML5先行者学习网
</style>bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网效果如图1：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网
结构性伪类选择器bVYHTML5中文学习网 - HTML5先行者学习网
1.伪类选择器bVYHTML5中文学习网 - HTML5先行者学习网
在讲伪类选择器之前，我先说下类选择器，类选择器的使用如下所示：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">bVYHTML5中文学习网 - HTML5先行者学习网
p.p_test {color:#F60;}bVYHTML5中文学习网 - HTML5先行者学习网
</style>bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网伪类选择器,大家看到这个术语不是很懂，楼主跟你们一样，但是看到下面的示例，立马知晓：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">bVYHTML5中文学习网 - HTML5先行者学习网
a:link {color:#F00; text-decoration:none;}bVYHTML5中文学习网 - HTML5先行者学习网
a:visited {color:#0F0; text-decoration:none;}bVYHTML5中文学习网 - HTML5先行者学习网
a:hover {color:#F0F; text-decoration:underline;}bVYHTML5中文学习网 - HTML5先行者学习网
a:active {color:#00F; text-decoration:none;}bVYHTML5中文学习网 - HTML5先行者学习网
</style>bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网看到这大家顿时知道了吧，在css中我们最常用的伪类选择器是使用在a元素上。那么伪类选择器与类选择器额区别是,类选择器可以随便起名字如“p.right”， bVYHTML5中文学习网 - HTML5先行者学习网
“p.left”；但是伪类选择器是css中已经定义好的选择器，不能随便起名。bVYHTML5中文学习网 - HTML5先行者学习网
2.伪元素选择器bVYHTML5中文学习网 - HTML5先行者学习网
伪元素选择器是指并不是对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。bVYHTML5中文学习网 - HTML5先行者学习网
在css中有下面四个伪元素选择器：bVYHTML5中文学习网 - HTML5先行者学习网
2.1.first-line伪元素选择器(它用于某个元素中的第一行文字使用样式，只能与块级元素关联)bVYHTML5中文学习网 - HTML5先行者学习网
示例如下：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<html>
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网<style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网p:first-line
bVYHTML5中文学习网 - HTML5先行者学习网 {
bVYHTML5中文学习网 - HTML5先行者学习网 color:#ff0000;
bVYHTML5中文学习网 - HTML5先行者学习网 font-variant:small-caps;
bVYHTML5中文学习网 - HTML5先行者学习网 }
bVYHTML5中文学习网 - HTML5先行者学习网</style>
bVYHTML5中文学习网 - HTML5先行者学习网</head></p><p><body>
bVYHTML5中文学习网 - HTML5先行者学习网<p>
bVYHTML5中文学习网 - HTML5先行者学习网This is a text.<br/>
bVYHTML5中文学习网 - HTML5先行者学习网That is a text.
bVYHTML5中文学习网 - HTML5先行者学习网</p>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网bVYHTML5中文学习网 - HTML5先行者学习网
2.2.first-letter伪元素选择器(向文本的第一个字母添加特殊样式,在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任 bVYHTML5中文学习网 - HTML5先行者学习网
何元素关联)bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<html>
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网<style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网p:first-letter
bVYHTML5中文学习网 - HTML5先行者学习网 {
bVYHTML5中文学习网 - HTML5先行者学习网 color:#ff0000;
bVYHTML5中文学习网 - HTML5先行者学习网 font-size:xx-large;
bVYHTML5中文学习网 - HTML5先行者学习网 }
bVYHTML5中文学习网 - HTML5先行者学习网</style>
bVYHTML5中文学习网 - HTML5先行者学习网</head></p><p><body>
bVYHTML5中文学习网 - HTML5先行者学习网<p>This is a text.</p>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网2.3.before伪元素选择器(在元素之前添加内容)bVYHTML5中文学习网 - HTML5先行者学习网
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点.bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 li {list-style:none;}
bVYHTML5中文学习网 - HTML5先行者学习网 li:before {content:'■'}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网2.4.after伪元素选择器(在元素之后添加内容)bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 li {list-style:none;}
bVYHTML5中文学习网 - HTML5先行者学习网 li:after {content:'--测试文字';color:red}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网3. 4个基本结构性伪类选择器bVYHTML5中文学习网 - HTML5先行者学习网
3.1.root选择器（将样式绑定到页面的根元素中）bVYHTML5中文学习网 - HTML5先行者学习网
所谓根元素，是指位于文档树的最顶层结构的元素，在html页面上就是指包含整个页面的“html”部分.bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 :root {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 body {background:red;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网ps:在使用样式指定root元素与body元素的背景时，根据情况不同的指定条件，背景色的显示范围会有所变化，如上面的代码不使用root选择器来指定root元素 bVYHTML5中文学习网 - HTML5先行者学习网
的背景色，只指定body元素的背景色，则整个页面就变成红色的了。bVYHTML5中文学习网 - HTML5先行者学习网
3.2.not选择器(想对某个结构使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，就使用not选择器)bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 body *:not(p) {color:blue;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>我是排除元素</p>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网3.3.empty选择器(指定当元素的内容为空时使用样式)bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 table td {padding:10px;}
bVYHTML5中文学习网 - HTML5先行者学习网 table td:empty {background:#DDD}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <table>
bVYHTML5中文学习网 - HTML5先行者学习网 <tr>
bVYHTML5中文学习网 - HTML5先行者学习网 <td>1</td>
bVYHTML5中文学习网 - HTML5先行者学习网 <td>2</td>
bVYHTML5中文学习网 - HTML5先行者学习网 <td>3</td>
bVYHTML5中文学习网 - HTML5先行者学习网 </p><p></tr>
bVYHTML5中文学习网 - HTML5先行者学习网 <tr>
bVYHTML5中文学习网 - HTML5先行者学习网 <td>4</td>
bVYHTML5中文学习网 - HTML5先行者学习网 <td>5</td>
bVYHTML5中文学习网 - HTML5先行者学习网 <td></td>
bVYHTML5中文学习网 - HTML5先行者学习网 </tr>
bVYHTML5中文学习网 - HTML5先行者学习网 </p><p></table>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网3.4.target选择器(使用target选择器来对页面中的某个target元素[该元素的id被当作页面的超链接类使用]指定样式，该样式只有在用户点击了页面中的超链接 bVYHTML5中文学习网 - HTML5先行者学习网
，并且跳转到target元素后起作用)bVYHTML5中文学习网 - HTML5先行者学习网
示例如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 :target {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <a href="#div1">连接一</a>
bVYHTML5中文学习网 - HTML5先行者学习网 <a href="#div2">连接一</a>
bVYHTML5中文学习网 - HTML5先行者学习网 <div class="test" id="div1">内容一</div>
bVYHTML5中文学习网 - HTML5先行者学习网 <div id="div2">内容二</p><p></div>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网4. 下面接着说其它几个选择器bVYHTML5中文学习网 - HTML5先行者学习网
first-child,last-child,nth-child,nth-last-child这几个选择器能够针对一个父元素中的第一个，最后一个，指定序号的子元素，甚至第偶数个，第奇数 bVYHTML5中文学习网 - HTML5先行者学习网
个子元素进行样式指定。bVYHTML5中文学习网 - HTML5先行者学习网
4.1.first-child与last-child的运用，first-child在ie7开始被支持，其它现代浏览器都支持bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 .ul1 li:first-child {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 .ul1 li:last-child {background:red;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul class="ul1">
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网4.2.nth-child(表示第几个元素),运用如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 .ul1 li:nth-child(2) {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul class="ul1">
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网4.3.nth-last-child(表示倒数第几个元素),运用如下:bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 .ul1 li:nth-last-child(1) {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul class="ul1">
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网ps:nth-child与nth-last-child的序号是从1开始，当然也可以是关键词或公式。；除了对指定序号的子元素使用样式以外，还可以对某个父元素中的所有第奇 bVYHTML5中文学习网 - HTML5先行者学习网
数个子元素或第偶数个子元素使用样式。bVYHTML5中文学习网 - HTML5先行者学习网
4.3.1 nth-child 对某个父元素中的所有第奇数个子元素的样式设置bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 .ul1 li:nth-child(odd) {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul class="ul1">
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目4</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </p><p><li>项目5</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目6</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目7</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网4.3.2 nth-last-child 对某个父元素中的所有倒数上去的第偶数个子元素的样式设置bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 .ul1 li:nth-last-child(even) {background:yellow;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <ul class="ul1">
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目1</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目2</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目3</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目4</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </p><p><li>项目5</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目6</li>
bVYHTML5中文学习网 - HTML5先行者学习网 <li>项目7</li>
bVYHTML5中文学习网 - HTML5先行者学习网 </ul>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网4.4.nth-of-type(匹配属于父元素的特定类型的第 N 个子元素的每个元素)bVYHTML5中文学习网 - HTML5先行者学习网
4.5.nth-last-of-type(配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数)bVYHTML5中文学习网 - HTML5先行者学习网
好，既然知道他们的用处，那我们直接看个列子：bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 h2:nth-of-type(odd) {background:red;}
bVYHTML5中文学习网 - HTML5先行者学习网 h2:nth-last-of-type(even) {background:green;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <h2>标题一</h2>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>内容一</p>
bVYHTML5中文学习网 - HTML5先行者学习网 <h2>标题二</h2>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>内容二</p>
bVYHTML5中文学习网 - HTML5先行者学习网 <h2>标题三</h2>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>内容三</p>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网5.only-child(匹配属于其父元素的唯一子元素的每个元素)bVYHTML5中文学习网 - HTML5先行者学习网
其实“:nth-child(1):nth-last-child(1)”的结合用法bVYHTML5中文学习网 - HTML5先行者学习网
bVYHTML5中文学习网 - HTML5先行者学习网<!DOCTYPE HTML>
bVYHTML5中文学习网 - HTML5先行者学习网<html lang="en-US">
bVYHTML5中文学习网 - HTML5先行者学习网<head>
bVYHTML5中文学习网 - HTML5先行者学习网 <meta charset="UTF-8">
bVYHTML5中文学习网 - HTML5先行者学习网 <title> 选择器 </title>
bVYHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">
bVYHTML5中文学习网 - HTML5先行者学习网 div p:only-child {background:red;}
bVYHTML5中文学习网 - HTML5先行者学习网 </style>
bVYHTML5中文学习网 - HTML5先行者学习网</head>
bVYHTML5中文学习网 - HTML5先行者学习网<body>
bVYHTML5中文学习网 - HTML5先行者学习网 <div>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>孩子一</p>
bVYHTML5中文学习网 - HTML5先行者学习网 </div>
bVYHTML5中文学习网 - HTML5先行者学习网 <div>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>孩子一</p>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>孩子二</p>
bVYHTML5中文学习网 - HTML5先行者学习网 </div>
bVYHTML5中文学习网 - HTML5先行者学习网 <div>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>孩子一</p>
bVYHTML5中文学习网 - HTML5先行者学习网 <p>孩子二</p>
bVYHTML5中文学习网 - HTML5先行者学习网 </p><p><p>孩子三</p>
bVYHTML5中文学习网 - HTML5先行者学习网 </div>
bVYHTML5中文学习网 - HTML5先行者学习网</body>
bVYHTML5中文学习网 - HTML5先行者学习网</html>
bVYHTML5中文学习网 - HTML5先行者学习网 bVYHTML5中文学习网 - HTML5先行者学习网上面说了那么多的css选择器的示例运用，有这些选择器可以大幅度的提高开发书写或修改样式表是的工作效率，我其实一直期待使用这些css选择器，可惜有IE
bVYHTML5中文学习网 - HTML5先行者学习网在几乎在pc上是不能使用这些高级的选择器，还好移动端的浏览器支持的不错。好啦，这些也只是css3的一部分选择器，下次我将会列出其余的部分，大家想知
bVYHTML5中文学习网 - HTML5先行者学习网道也可以下载css3手册先一睹为快！
bVYHTML5中文学习网 - HTML5先行者学习网
