整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序员HTML5培训教程-总结30个CSS3选择器
1 *：通用选择器
*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。
*选择器也可以应用到子选择器中，例如下面的代码：
container * { border:1px solid black; }
这样ID为container 的所有子标签元素都被选中了，并且设置了border。
2 #id：id选择器
# container {
width: 960px;
margin: auto;
}
id选择器是很严格的并且你没办法去复用它。使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？
3 .class：类选择器
.error {
color: red;
}
这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。
4 selector1 selector2：后代选择器
li a {
text-decoration: none;
}
后代选择器是比较常用的选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的a元素，而只需要定位li标签下的a标签？这时候你就需要使用后代选择器了。
提示：如果你的选择器像X Y Z A B.error这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。
5 tagName：标签选择器
a { color: red; }
ul { margin-left: 0; }
如果你想定位页面上所有的某标签，不是通过id或者是’class’，这简单，直接使用类型选择器。
6 selector:link selector:visited selector:hover selector:active 伪类选择器
一般情况下selector都为a标签，以上四种伪类选择器代表的意思如下：
link:连接平常的状态。
visited:连接被访问过之后。
hover:鼠标放到连接上的时候。
active:连接被按下的时候。
未移入a标签链接时：link
移入a标签链接时：link、hover
点击a标签链接时：link、hover、active
点击后未移入a标签连接时：link、visited
点击后移入a标签连接时：link、visited、hover
点击后再次点击a标签连接时：link、visited、hover、active
这个就是所有组合的样式了。
如果有多个同样的样式，后面的样式会覆盖前面的样式，所以这四个伪类的定义就有顺序的要求了，而大家所说的‘lvha’也是因为这个原因。
7 selector1 + selector2 ：相邻选择器
ul + p {
color: red;
}
它只会选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。
8 selector1 > selector2 : 子选择器
div#container > ul {
border: 1px solid black;
}
它与差别就是后面这个指挥选择它的直接子元素。看下面的例子
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
container > ul只会选中id为’container’的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用css选择器时候是强烈建议这么做的。
9 selector1 ~ selector2 : 兄弟选择器
ul ~ p {
color: red;
}
兄弟节点组合选择器跟相邻选择器很相似，然后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。
10 selector[title] : 属性选择器
a[title] {
color: green;
}
上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。
11 selector[href="foo"] : 属性选择器
a[href="http://strongme.cn"] {
color: #1f6053; / nettuts green /
}
上面这片代码将会把href属性值为锚点标签设置为绿色，而其他标签则不受影响。
注意：我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话，尽量使用标准的CSS3选择器。
12 selector[href*=”strongme”] : 属性选择器
a[href*="strongme"] {
color: #1f6053;
}
指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。
但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是strongme相关的站点，如果要更加具体的限制的话，那就使用^和$，分别表示字符串的开始和结束。
13 selector[href^=”href”] : 属性选择器
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。
用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签，那我们就可以用与上面相似的代码。
注意我们没有搜索http://，那是没必要的，因为它都不包含https://。
14 selector[href$=”.jpg”] : 属性选择器
a[href$=".jpg"] {
color: red;
}
这次我们又使用了正则表达式$，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。
15 selector[data-*=”foo”] : 属性选择器
a[data-filetype="image"] {
color: red;
}
回到上一条，我们如何把所有的图片类型都选中呢png,jpeg,’jpg’,’gif’？我们可以使用多选择器。看下面：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性data-filetype指定这个链接指向的图片类型。
a[data-filetype="image"] {
color: red;
}
16 selector[foo~=”bar”] : 属性选择器
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个~符号可以定位那些某属性值是空格分隔多值的标签。
继续使用第15条那个例子，我们可以设置一个data-info属性，它可以用来设置任何我们需要的空格分隔的值。
给这些元素设置了这个标志之后，我们就可以使用~来定位这些标签了。
/ Target data-info attr that contains the value "external" /
a[data-info~="external"] {
color: red;
}
/ And which contain the value "image" /
a[data-info~="image"] {
border: 1px solid black;
}
17 selector:checked ： 伪类选择器
input[type=radio]:checked {
border: 1px solid black;
}
上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。
18 selector:after ： 伪类选择器
before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。
当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候，这招就特别管用了。
根据CSS3标准规定，可以使用两个冒号::。然后为了兼容性，浏览器也会接受一个冒号的写法。其实在这个情况下，用一个冒号还是比较明智的。
19 selector:hover ： 伪类选择器
div:hover {
background: #e3e3e3;
}
不用说，大家肯定知道它。官方的说法是user action pseudo class.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。
注意：旧版本的IE只会对加在锚点a标签上的:hover伪类起作用。
通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。
a:hover {
border-bottom: 1px solid black;
}
专家提示：border-bottom:1px solid black;比text-decoration:underline;要好看很多。
20 selector1:not(selector2) ： 伪类选择器
div:not(#container) {
color: blue;
}
取反伪类是相当有用的，假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。
或者说我想选中所有出段落标签之外的所有标签
:not(p) {
color: green;
}
21 selector::pseudoElement ： 伪类选择器
p::first-line {
font-weight: bold;
font-size:1.2em;
}
我们可以使用::来选中某标签的部分内容css3 radius，如第一段，或者是第一个字。但是记得必须使用在块式标签上才起作用。
伪标签是由两个冒号 :: 组成的
定位第一个字：
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。
它通常在一些新闻报刊内容的重点突出会使用到。
定位某段的第一行
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
跟::first-line相似，会选中段落的第一行
为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如:first-line,:first-letter,:before,:after.但是这个兼容对新介绍的特性不起作用。
22 selector:nth-child(n) ： 伪类选择器
li:nth-child(3) {
color: red;
}
还记得我们面对如何取到堆叠式标签的第几个元素时无处下手的时光么，有了nth-child那日子就一去不复返了。
请注意nth-child接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).
我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。
23 selector:nth-last-child(n) ： 伪类选择器
li:nth-last-child(2) {
color: red;
}
假设你在一个ul标签中有N多的元素，而你只想获取最后三个元素，甚至是这样li:nth-child(397)，你可以用nth-last-child伪类去代替它。
24 selectorX:nth-of-type(n) ： 伪类选择器
ul:nth-of-type(3) {
border: 1px solid black;
}
曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。
想象一下有5个ul标签。如果你只想对其中的第三个进行修饰，而且你也不想使用id属性，那你就可以使用nth-of-type(n)伪类来实现了，上面的那个代码，只有第三个ul标签会被设置边框。
25 selector:nth-last-of-type(n) ： 伪类选择器
ul:nth-last-of-type(3) {
border: 1px solid black;
}
同样，也可以类似的使用nth-last-of-type来倒序的获取标签。
26 selector:first-child ： 伪类选择器
ul li:first-child {
border-top: none;
}
这个结构性的伪类可以选择到第一个子标签css3 3D，你会经常使用它来取出第一个和最后一个的边框。
假设有个列表，每个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。
27 selector:last-child ： 伪类选择器
ul > li:last-child {
color: green;
}
跟first-child相反，last-child取的是父标签的最后一个标签。
例如
标签
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
这里没啥内容，就是一个了 List。
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
上面的代码将设置背景色，移除浏览器默认的内边距，为每个li设置边框以凸显一定的深度。
28 selector:only-child ： 伪类选择器
div p:only-child {
color: red;
}
说实话，你会发现你几乎都不会用到这个伪类。然而，它是相当有用的，说不准哪天你就会用到它。
它允许你获取到那些只有一个子标签的父标签下的那个子标签。就像上面那段代码，只有一个段落标签的div才被着色。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
上面例子中，第二个div不会被选中。一旦第一个div有了多个子段落css3 transition，那这个就不再起作用了。
29 selector:only-of-type： 伪类选择器
li:only-of-type {
font-weight: bold;
}
结构性伪类可以用的很聪明。它会定位某标签下相同子标签的只有一个的目标。设想你想获取到只有一个子标签的ul标签下的li标签呢？
使用ul li会选中所有li标签。这时候就要使用only-of-typecss3圆角了。
ul > li:only-of-type {
font-weight: bold;
未完待续欢迎继续关注好程序员前端教程分享!
为一名拥有10多年经验的HTML5前端工程师，我深知CSS选择器、属性和值在构建现代网页中的重要性。本文旨在提供一个深入的指导，帮助你理解并有效地使用CSS选择器，以及如何通过属性和值来控制网页的样式。
选择器是CSS中最重要的部分之一，它决定了哪些HTML元素会被应用特定的样式规则。以下是一些最常用的选择器类型：
CSS属性是样式声明的名称，它们决定了如何修改选择器选中的元素的表现。每个属性都有对应的值，用来指定应用到元素上的具体样式。
了解了选择器和属性后，我们可以开始编写CSS来美化我们的网页。以下是一些基本的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Page Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 20px;
}
nav {
background-color: #333;
padding: 10px 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 10px 15px;
display: block;
}
nav ul li a:hover {
color: blue;
background-color: #ddd;
border-radius: 4px;
}
.error {
color: red;
font-weight: bold;
display: block;
margin-top: 5px;
}
input[type="text"],
input[type="email"] {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
blockquote {
padding: 20px;
background-color: #eee;
border-left: 5px solid #333;
margin: 20px 0;
font-style: italic;
}
blockquote::before,
blockquote::after {
content: '"';
font-weight: bold;
}
@media (max-width: 600px) {
nav ul li {
display: block;
margin-right: 0;
}
nav ul li a {
display: block;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div style="max-width: 600px; margin: auto;">
<form>
<div style="margin-bottom: 20px;">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<span class="error">This field is required</span>
</div>
<div style="margin-bottom: 20px;">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span class="error">Please enter a valid email</span>
</div>
<div style="text-align: center;">
<button type="submit" style="padding: 10px 20px; background-color: #333; color: white; border: none; border-radius: 4px; cursor: pointer;">Submit</button>
</div>
</form>
</div>
<p style="text-align: center;">
Visit our <a href="https://example.com">website</a> for more information.
</p>
<blockquote>
The only way to do great work is to love what you do.
</blockquote>
</body>
</html>
选择器、属性和值是CSS的基石，它们共同构成了网页的外观和感觉。通过精确的选择器，我们可以定位到页面上的任何元素，然后用属性和值来精细地调整它们的表现。随着CSS的不断发展，我们有了更多的属性和更复杂的选择器来创建更加丰富和互动的用户体验。掌握这些基础知识是成为一名出色的前端开发者的关键。
学会了基本的id，class类选择器和descendant后代选择器，然后就觉得完事了吗？如果这样，你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3，并且只能在现代的浏览器中使用，但学会这些是大有好处的。
什么是CSS选择器呢？
每一条css样式定义由两部分组成，形式如下：[code]选择器{样式}[/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
* {
margin: 0;
padding: 0;
}首先我们来认识一些简单的选择器，尤其针对初学者，然后再看其他高级的选择器。
星号可以用来定义页面的所有元素。许多开发者会使用这个技巧来把margin和padding都设为0。在快速开发测试中这种设置固然是好的，但我建议绝对不要在最终的产品代码中使用。因为会给浏览器增加大量不必要的负荷。
星形*也可以用于子元素选择器（child selectors）。
#container * {
border: 1px solid black;
}这段代码会定义#container div所有子元素的样式。跟上面一样，如果可以尽量避免使用这个方法。
#container {
width: 960px;
margin: auto;
}使用＃号作为前缀可以选择该id的元素。这是最常见的用法，但使用id选择器时要谨慎。
问问自己：是否真的需要使用id来定义元素的样式？
id选择器比较局限，不能重用。如果可以的话，先尝试使用标签名称，HTML5的其中一个新元素，或使用伪类。
.error {
color: red;
}这是class类选择器。id和class类选择器的区别是，类选择器可以定义多个元素。当你想定义一组元素的样式时可以使用class选择器。另外，可以使用id选择器来定义某一个特定的元素。
li a {
text-decoration: none;
}下一个最常见的选择器是descendant后代选择器。当你需要更精确的定位时，可以使用后代选择器。例如，假如说你只想选择无序列表里的链接，而不是所有的链接？这种情况下你就应该使用后代选择器。
经验分享 - 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷。
a { color: red; }
ul { margin-left: 0; }假如你想定义页面里所有type标签类型一样的元素，而不使用id或者class呢？可以简单地使用元素选择器。比如选择所有的无序列表，可以用ul {}。
a:link { color: red; }
a:visted { color: purple; }我们使用:link伪类来定义所有还没点击的链接。
另外还有:visited伪类可以让我们给曾经点击过或者访问过的链接添加样式。
ul + p {
color: red;
}这是邻近元素选择器，只会选中紧接在另一个元素后的元素。这上面的示例中，只有每个ul后面的第一个段落是红色的。
div#container > ul {
border: 1px solid black;
}X Y和X > Y的区别是后者只会选中直接后代。例如，看看下面的代码：
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>#container > ul只会定义id为container的div里的ul元素，而不会定义第一个li里的ul。
因此，使用这种选择器的效果更佳。实际上，在JavaScript中尤其适用。
ul ~ p {
color: red;
}这种兄弟选择器跟X + Y很像，但没有那么严格。邻近选择器（ul + p）只会选择紧接在前一个元素后的元素，但兄弟选择器更广泛。比如，在上面的例子中，只要在ul后的p兄弟元素都会被选中。
a[title] {
color: green;
}这种是属性选择器，在上面的例子中，带有title属性的链接标签才会被匹配。没有title属性的标签不会受到影响。但如果想更具体地根据属性的值来选择，就继续往下看吧。
a[href="http://www.icodingedu.com"] {
color: #1f6053; /* nettuts green */
}上面的代码定义了所以指向http://www.icodingedu.com的链接都是nettuts品牌的绿色。其他的链接不受影响。
注意我们把赋值放在引号里面，在JavaScript中选择元素的时候也要记住这么使用。尽可能地使用CSS3标准的选择器。
这种方法不错，但还是有点局限。万一链接也是指向Nettuts+，但路径是icodingedu.com而不是完整的路径呢？这种情况下我们可以使用正则表达式（regular expression）。
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}解决了上面的问题。星号表示赋值出现在属性的任意处。这样就定义了指向nettuts.com，net.tutsplus.com甚至tutsplus.com的链接。
要记住的是这种表达比较宽泛。假如链接包含tuts但指向了不是Envato旗下的网站呢？如果你想更精确，可以使用^和$来匹配前缀和后缀。
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}你有想过有些网站是怎么在链接旁边加一个小图标指示这是外部链接吗？我相信你一定有见过这样的小图标，它们标示着链接会导向到另外的网站。
这非常容易做到。通常使用正则表达式来指定字符串的前缀。如果我们想定义所有href属性前缀为http的链接标签，我们可以使用上面代码的选择器。
可以看到我们没有使用http://，因为没有必要，而且这样不能匹配以https://开头的url。
接下来，比如说我们要定义所以指向图片的链接又要怎么办呢？这样可以匹配字符串的后缀。
a[href$=".jpg"] {
color: red;
}再来，我们使用正则表达式符号$来表示字符串的后缀。在上面的例子中，我们将匹配所以指向图片或至少以.jpg结尾的url。要记住的是当然这些样式对gif和png是无效的。
a[data-filetype="image"] {
color: red;
}就像上面所说的，我们怎么匹配所有的图片，包括png，jpeg，jpg和gif？可以使用多个选择器。
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}但这样很麻烦，也很没有效率。另一种解决方法是使用自定义属性。比如在图片链接标签中添加data-filetype属性。
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>这样，我们就可以使用属性选择器来定义链接的样式。
a[data-filetype="image"] {
color: red;
}a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}这个技巧将会让小伙伴们对你刮目相看。并没有很多人知道这个技巧。波浪符号（~）可以让你定义取值带有空格的属性。
继续使用前面的自定义属性，创建data-info属性来匹配带有空格的取值。举个例子，这里我们匹配外部链接和图片链接。
"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>使用上面的代码，现在我们可以用波浪号的技巧来定义包含其中一个值的元素。
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}巧妙吧？
input[type=radio]:checked {
border: 1px solid black;
}很简单，这个伪类可以用来定义选中（checked）的元素，比如单选按钮（radio）或多选按钮（checkbox）。
伪类before和after属于高级用法。几乎每一天都有人找到高效而有创意的新用法。这两个伪类可以在元素前面和后面添加内容。
许多人认识到这两个伪类是因为这是清除浮动的技巧。
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}这个例子利用:after在元素后面添加间隔和清除浮动的元素。这是你值得拥有的高级技巧，尤其是当overflow: hidden;不管用的时候。
根据CSS3选择器规范，语法上你应该使用双冒号来::来指定伪类。然而，为了兼容多数浏览器，单冒号也被承认。实际上，在目前的情况下，使用单冒号的选择是明智的。
div:hover {
background: #e3e3e3;
}好吧，这个你一定懂。正式的叫法是用户交互伪类user action pseudo class。听起来有些费解，但实际上并非如此。想给用户鼠标划过的元素添加样式？这就派上用场了！
要记住的是在旧版的IE里，:hover只能用于链接标签。
最常见的用法是，比如，当鼠标划过链接，链接会出现下划线（border-bottom）。
a:hover {
border-bottom: 1px solid black;
}经验分享 - border-bottom: 1px solid black;比text-decoration: underline;的效果更好。
div:not(#container) {
color: blue;
}否定伪类特别有用。假设我想选择所有 divs，除了 id 为 的那个 container。上面的代码片段将完美地处理该任务。
或者，如果我想选择除段落标签之外的每个元素（不建议），我们可以这样做：
*:not(p) {
color: green;
}p::first-line {
font-weight: bold;
font-size: 1.2em;
}我们可以使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只能用于块状（block）元素。
伪元素使用两个冒号::。
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}上面的代码会先找到所有的段落，然后匹配元素的第一个字母。
这常用于创建类似报纸文章的样式。
p::first-line {
font-weight: bold;
font-size: 1.2em;
}类似地，这里使用::first-line来定义元素的第一行的样式。
“为了兼容现有的样式标准，用户代理必须同时采纳CSS1和CSS2里使用单冒号来表示伪元素的标准（比如:first-line，:first-letter，:before和:after）。但新的伪元素不兼容这种特列。 － 资料来源”
li:nth-child(3) {
color: red;
}还记得以前我们不可以匹配一组序列元素里的某个元素吗？nth-child伪元素就能解决这个问题！
要注意的是nth-child指序列里的第n个元素，从1数起。如果你想匹配列表里的第二个元素，可以使用li:nth-child(2)。
我们甚至可以使用这种方法来选择一系列的子元素。比如li:nth-child(4n)可以选择排在4的倍数的元素。
li:nth-last-child(2) {
color: red;
}假如你有一个无序列表里面有很多子元素，但你只想匹配第三到最后一个元素，那该怎么办？你可以使用伪类nth-last-child。
这个技巧跟上面的一样，但是从集合的最后一个数起。
ul:nth-of-type(3) {
border: 1px solid black;
}有时候你可能想通过元素的类型type来选择，而不是子元素child。
假设有5个无序列表。如果你想定义第三个ul的样式，但又没有id来进行匹配，那么可以使用伪类nth-of-type(n)。在上面的代码中，只有第三个ul会有边框。
ul:nth-last-of-type(3) {
border: 1px solid black;
}当然，我们也可以使用nth-last-of-type来选择倒数第n个元素。
ul li:first-child {
border-top: none;
}这种伪类可以用于选中母元素的第一个子元素，常常用于去掉第一个或最后一个元素的边框。
例如，假设你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。这样的话第一个和最后一个元素看来起就没有那么整齐。
许多设计师就会通过给第一个和最后一个元素添加样式来解决，但实际上可以使用这里提到的伪类。
ul > li:last-child {
color: green;
}last-child是first-child的反面，可以匹配最后一个子元素。
下面的例子展示了怎么使用这些伪类。先创建一个无序列表。
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>这是一个简单的列表。
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}这部分代码设置背景颜色，去掉浏览器给ul设置的padding，然后给li加上边框增加深度。
给列表增加深度，可以给每个li添加比背景颜色深一点的下边框border-bottom。然后添加比背景颜色浅一点的上边框border-top。
唯一的问题是，上图中无序列表的顶部和底部也会有边框，看起来有点奇怪。可以用伪类:first-child和:last-child来解决。
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}这样就好了。
div p:only-child {
color: red;
}事实上你很少会用到only-child这个伪类，但是当你需要的时候是可以使用的。
only-child可以让你匹配唯一的子元素。例如，在上面的代码中，只有当div只有一个p子元素的时候段落字体才是红色的。
再看下面的代码。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>在这种情况下，第二个div里面的段落不会被选中，只有第一个div的段落才被选中。只要母元素含有超过一个子元素，only-child伪类就会失效。
li:only-of-type {
font-weight: bold;
}这个伪类有几种不同的用法。only-of-type会匹配母元素里没有邻近兄弟元素的子元素。例如，匹配所有只有一个列表元素的ul。
首先想想要怎么做？你可以使用ul li，但这样会匹配所有无序列表的元素，这样only-of-type就是唯一的解决方法。
ul > li:only-of-type {
font-weight: bold;
}first-of-type可以用来选择该类型的第一个元素。
为了更好地理解，我们来做一个练习。拷贝下面的代码粘贴到你的代码编辑器里：
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>现在，无需进一步阅读，尝试找出如何仅定位 "List Item 2"。当您弄清楚（或放弃）后，请继续阅读。
有多种方法可以解决此测试。我们将审查其中的一些。让我们从使用 first-of-type.
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}这个片段本质上说，要找到页面上的第一个无序列表，然后只找到直接子项，它们是列表项。接下来，将其过滤到该集合中的第二个列表项。
另一种选择是使用相邻选择器。
p + ul li:last-child {
font-weight: bold;
}在这种情况下，我们找到 ul 立即执行 p 标记的 ，然后找到元素的最后一个子元素。
使用这些选择器，我们可以随心所欲地变得讨厌或好玩。
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}这一次，我们抓取 ul 页面上的第一个，然后找到第一个列表项，但从底部开始！
如果你想兼容旧的浏览器，比如IE6，在使用这些新的选择器时需要更加注意。但是不要让旧浏览器妨碍你做新的尝试。可以参考浏览器兼容性列表。另外可以使用Dean Edward的E9.js。
另外，当使用JavaScript类库的时候，比如jQuery，尽可能地使用原生的CSS3选择器。这样可以加快代码的运行速度，因为选择器引擎使用浏览器内置的解析器，速度更快。
感谢阅读，希望你能有所收获！如果学习有问题，可以私聊我们！
*请认真填写需求信息，我们会在24小时内与您取得联系。
