[CSS]-2-css选择器
引言
在前面的文章中，我们已经使用了CSS样式，但并没有解释为什么这些CSS语句可以控制某个特定的标签，这篇文章将介绍CSS中的一个重要概念——"选择器"。
文章目录
- 0×1.什么是css选择器
- 0×2.全局选择器
- 0×3.标签选择器
- 0×4.ID选择器
- 0×5.类选择器
- 0×6.同类标签选择器
- 0×7.附加类选择器
- 0×8.属性选择器
- 0×9.属性分片匹配选择器
- 0×10.复合分组选择器
- 0×11.派生选择器
- 0×12.子选择器
- 0×13.相邻选择器
- 0×14.伪元素选择器
- a.块级首行选择器
- b.块级首字母选择器
- c.前缀插入和后缀插入
- 0×15.结构性伪类选择器
- a.子元素选择器
- b.子元素nth-child(n)系列选择器
- 0×16.根元素选择器
- 0×17.UI伪类选择器
- 0×18.超链接伪选择器的四种状态
- 0×19.否定选择器
- 0×20.空元素选择器
- 0×21.匹配语言选择器
- 0×22.锚点定位选择器
- 0×23.伪类选定选择器
0×1.什么是css选择器
"css选择器"是一种模式，我们可以通过这种模式来选择HTML文档中的单个标签、一组或一类标签等。
"css选择器"的格式如下：
1）如果是"内联样式"，那么写在style属性后面的css语句仅控制当前标签，例如：
<!--直接将CSS样式写在p标签的style属性中，每个css控制属性都使用分号分割，本例只有一个控制属性，就是将这段p的文字颜色更改为绿色--> <p style="color:green;">www.qingsword.com</p>
2）如果写在head头部的style标签，或使用link标签导入的其他css文件，其中每个css选择器的格式为：
[标签名称|标签ID|类名称|属性名称|...] {
CSS控制属性1;
CSS控制属性2;
....
}
/*css控制属性被包含在一对大括号中，每个属性用分号分隔，在大括号前"标签名称"或"标签ID"都属于某类型的"CSS选择器"，用于控制某些标签的样式，稍后会详细介绍*/
0×2.全局选择器
全局选择器能够控制HTML文档中所有标签的CSS样式，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>全局选择器实例</title> <!--导入外部文件style.css--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--body中包含三个可见标签p，b，span--> <p>www.qingsword.com</p> <b>晴刃</b> <br><br> <span>qingsword.com</span> <br><br> </body> </html>
style.css文件内容：
@charset "utf-8";
/*全局选择器使用"星号"标识，border属性将对每个被控制的标签添加一个边框，边框厚度1像素，solid为实线，green指定边框颜色为绿色*/
*{
border: 1px solid green;
}
显示效果：
www.qingsword.com
晴刃 qingsword.com在上面的显示中，我们看到了一个比较奇怪的结果，body只有3个可见标签，为什么会出现5个绿色边框？实际上，全局属性会从HTML文档的第一个标签开始匹配，第一个标签是html，所以给html整个文档添加了一个边框，也就是最外层那个边框，因为head在浏览器中不可见，所以我们看不到head的边框，之后选择器匹配到body标签，给整个body也添加了一个绿色边框，这就是出现第二层边框的原因，然后对body中3个可见标签分别添加边框，读者可能发现，p标签的边框是占一整行的，而b和span标签仅包含了其文字，这是块状元素与行内元素的区别。
0×3.标签选择器
标签选择器仅匹配同类标签，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>标签选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>www.qingsword.com</p> <span>www.qingsword.com</span> <p>晴刃</p> <b>晴刃</b> </body> </html>
style.css文件内容：
@charset "utf-8";
/*选择html文档中所有p标签，将其文字样式更改成斜体显示，文字演示改成绿色*/
p{
font-style: italic;
color: green;
}
显示效果：
www.qingsword.com
www.qingsword.com晴刃
晴刃0×4.ID选择器
每个标签都可以设定一个单独的ID值，利用这个值CSS能够匹配到单个标签，在HTML文档中，最好不要出现重复的ID值，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>ID选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--单独设置了其中一个p标签和span标签的id值--> <p id="one">www.qingsword.com</p> <span>晴刃</span> <p>晴刃</p> <span id="two">www.qingsword.com</span> </body> </html>
style.css文件内容：
@charset "utf-8";
/*使用ID选择器时，需要在每个ID值前面添加#号，这是标准规定的格式，下面将html文档中id值为one的标签的文字设置成绿色，将文档中id值为two的标签的文字颜色设置为黄色，其他标签不受影响*/
#one{
color: green;
}
#two{
color: yellow;
}
显示效果：
www.qingsword.com
晴刃晴刃
www.qingsword.com0×5.类选择器
类选择器可以对一组元素进行样式定义，在HTML文档中，能够通过给标签添加class属性值，来给标签分类，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>类选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--给两个网址所对应的标签配置了相同的类值"abc"，给包含中文的两个标签配置了相同的类值"def"--> <p class="abc">www.qingsword.com</p> <span class="def">晴刃</span> <p class="def">晴刃</p> <span class="abc">www.qingsword.com</span> </body> </html>
style.css文件内容：
@charset "utf-8";
/*类选择器需要在每个类名称前添加一个英文的句号来使用它，这是标准规定的格式，下面的两个选择器分别选择了HTML文档中所有class值是abc的标签，将其文字颜色设置为绿色，并且选择了HTML文档中所有class值是def的标签，将其文字颜色设置为黄色*/
.abc{
color: green;
}
.def{
color: yellow;
}
显示效果：
www.qingsword.com
晴刃晴刃
www.qingsword.com0×6.同类标签选择器
如果有多个标签都配置了相同的class值，但现在我只想选择其中某个标签使用CSS渲染，而不影响同类下其它标签，那么就可以用到"同类标签选择器"，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>同类标签选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--下面三个标签，同属于"abc"类--> <b class="abc">www.qingsword.com</b> <p class="abc">www.qingsword.com</p> <span class="abc">晴刃</span> </body> </html>
style.css文件内容：
@charset "utf-8";
/*仅匹配类名称为"abc"的所有p标签，虽然span和b标签也属于"abc"这个类，但是并不会被这个选择器匹配到*/
p.abc{
color: yellow;
}
显示效果：
www.qingsword.com
www.qingsword.com
晴刃0×7.附加类选择器
当我们希望一个标签同时拥有多个类选择器的样式时，可以在class中定义多个类名称，用空格分隔，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>附加类选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--p标签属于"abc"类，同时也属于"def"类--> <p class="abc def">www.qingsword.com</p> <span class="abc">晴刃</span> </body> </html>
style.css文件内容：
@charset "utf-8";
.abc{ /*设置abc类标签中的文字为黄色*/
color: yellow;
}
.def{ /*设置def类标签中的文字为斜体*/
font-style: italic;
}
显示效果：
www.qingsword.com
晴刃0×8.属性选择器
这个选择器并不是很常用，但当某个标签拥有其它标签所没有的属性时，可以尝试使用这个选择器，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>属性选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--a标签中包含一个href属性--> <a href="http://www.qingsword.com" title="晴刃" target="_blank">晴刃主页</a> </body> </html>
style.css文件内容：
@charset "utf-8";
/*将某个标签的属性包含在一对中括号中，这将匹配到所有拥有href这个属性的标签*/
[href]{
color: pink;
}
显示效果：
属性选择器不仅只针对属性名称，还能携带属性值一起匹配，只有当属性值和属性名称都匹配成功时，CSS才会发挥作用：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>属性选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--配置一个表单，包含一个普通文本框和一个密码文本框--> <form> <input type="text" placeholder="text"> <br> <input type="password" placeholder="password"> </form> </body> </html>
style.css文件内容：
@charset "utf-8";
/*只匹配具有type属性，且属性值为text的标签，给它添加一个2像素的边框，边框使用dotted虚线，边框颜色为green*/
[type="text"]{
border: 2px dotted green;
}
显示效果：
0×9.属性分片匹配选择器
这个选择器是CSS3规范新添加的，需要浏览器对CSS3的支持才能使用，当我们只需要匹配某个元素某个属性值的一部分时，就可以可以使用"分片匹配选择器"，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>属性分片选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--下面的p标签分别配置了不同的类值--> <p class="aabb">www.qingsword.com</p> <p class="aacc">www.qingsword.com</p> <p class="yygg">晴刃</p> <p class="bbgg">晴刃</p> <p class="abcdefg">qingsword</p> <p class="abc def ghi">qingsword</p> </body> </html>
style.css文件内容：
@charset "utf-8";
/*当标签拥有class属性，并且属性值的开始部分为"aa"时匹配*/
[class^="aa"]{
color: green;
}
/*当标签拥有class属性，并且属性值的末尾部分为"gg"时匹配*/
[class$="gg"]{
color: yellow;
}
/*当标签拥有class属性，并且属性值中包含"bcd"这几个字符时匹配*/
[class*="bcd"]{
color: red;
}
/*当标签拥有class属性，并且属性值中包含"def"类时匹配（CSS2支持）*/
[class~="def"]{
color: pink;
}
显示效果：
www.qingsword.com
www.qingsword.com
晴刃
晴刃
qingsword
qingsword
Ps：最好不要经常使用这种选择器，查找字符串的效率非常低，大量使用这种选择器会影响页面加载速度。
0×10.复合分组选择器
分组选择器可以用逗号罗列所有单一的选择器（标签，ID，类，属性等等），然后一起设置他们的CSS样式，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>复合分组选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <b>晴刃：</b><span class="website">www.qingsword.com</span> <br> <p id="ppp">段落内容</p> </body> </html>
style.css文件内容：
@charset "utf-8";
/*使用逗号分隔所有选择器，将统一设置这些选择器，使其文字颜色变成绿色*/
b,.website,#ppp{
color: green;
}
显示效果：
晴刃：www.qingsword.com
段落内容
0×11.派生选择器
"派生选择器"也叫"后代选择器"，不在乎元素嵌套多少层，只要在某指定元素下，多深的嵌套都能匹配到，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>派生选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--在p标签下嵌套了多层标签--> <p> <a href="#" target="_blank"> <b> www.<span>qingsword</span>.com </b> </a> </p> </body> </html>
style.css文件内容：
@charset "utf-8";
/*后代选择器的书写方式：前面写父标签的选择器名称（可以是标签名称，ID，类等等），后面空一格再写被嵌套的元素的选择器名称（可以是标签名称，ID，类等等），本例中，只要是在p标签中的span标签都将被匹配到*/
p span{
color: green;
}
显示效果：
0×12.子选择器
子选择器仅选择某个标签所包含的直属子标签，多层嵌套的元素不会被匹配到，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>子选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--p标签中包含三个span标签，但第二个span被包含在b标签中，并不是p的直属子标签--> <p> <span>www.qingsword.com</span> <br> <b><span>qingsword</span></b> <br> <span>晴刃</span> </p> </body> </html>
style.css文件内容：
@charset "utf-8";
/*只有p的直属span子标签，才会被匹配到*/
p>span{
color: green;
}
显示效果：
www.qingsword.com
qingsword
晴刃
0×13.相邻选择器
相邻选择器能够选择某个标签紧随其后的单个标签，也能选择某个标签后面的一类标签，请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>相邻选择器实例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!--因为都是内联元素，所以显示成一行--> <b>aaa</b> <i>bbb</i> <i>ccc</i> <span>ddd</span> <span>eee</span> </body> </html>
style.css文件内容：
@charset "utf-8";
/*匹配在b后与b相邻的第一个i标签，注意br标签也占用一个标签位，如果b标签后使用了br标签，在本例中，这个选择器将选择br标签，而br只是换行符，所以颜色设置并没有意义*/
b+i{
color: green;
}
/*选择b标签后的所有span标签，不需要相邻*/
b~span{
color: yellow;
}
显示效果：
aaa
bbb
ccc
ddd
eee
0×14.伪元素选择器
a.块级首行选择器
"块级首行选择器"能够帮助我们选择"块状元素"的首行进行CSS样式控制，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块级首行选择器实例</title>
<style type="text/css">
<!--将所有p元素的第一行文字颜色改为yellow-->
p::first-line{
color: yellow;
}
</style>
</head>
<body>
<p>
first line<br>
second line<br>
third line
</p>
<p>
第一行<br>
第二行<br>
第三行
</p>
</body>
</html>
显示效果：
first line
second line
third line
第一行
第二行
第三行
b.块级首字母选择器
仅选择块状元素中所包含的第一个字符进行CSS控制：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块级首字母选择器实例</title>
<style type="text/css">
<!--仅选择p标签中包含的第一个字符，将其颜色更改成yellow-->
p::first-letter{
color: yellow;
}
</style>
</head>
<body>
<p>www.qingsword.com</p>
<p>晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com
晴刃
c.前缀插入和后缀插入
"前缀插入和后缀插入"选择器，可以在指定的元素前面或后面插入设定字符：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块级首字母选择器实例</title>
<style type="text/css">
<!--在id为"website"的标签的前面，插入字符"www."-->
#website::before{
content: "www.";
}
<!--在id为"name"的标签后面插入字符"刃"-->
#name::after{
content: "刃";
}
</style>
</head>
<body>
<span id="website">qingsword.com</span>
<br>
<span id="name">晴</span>
</body>
</html>
显示效果：
www.qingsword.com
晴刃
晴刃
0×15.结构性伪类选择器
a.子元素选择器
"子元素选择器"能够帮助我们选择某个标签下指定的子标签，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>子元素选择器实例</title>
<style type="text/css">
<!--选择id为"t1"的标签下的第一个p标签-->
#t1>p:first-child{
color: yellow;
}
<!--选择id为"t2"的标签下的最后一个p标签-->
#t2>p:last-child{
color: red;
}
<!--如果div中只有一个子p元素，则匹配-->
div>p:only-child{
color: pink;
}
<!--在div标签中仅包含了一个span类型的标签，则匹配-->
div>span:only-of-type{
color: purple;
}
</style>
</head>
<body>
<div id="t1">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<hr>
<div id="t2">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<hr>
<!--下面这两个div中，第二个div中有两个span，所以不会被匹配，第一个div中仅有一个span，会被only-of-type匹配到-->
<div>
<p>第一段</p>
<p>第二段</p>
<span>第三段</span>
</div>
<div>
<p>第一段</p>
<span>第二段</span>
<br>
<span>第三段</span>
</div>
<hr>
<!--下面这个div中仅有一个p标签，会被only-child匹配到-->
<div>
<p>第一段</p>
</div>
</body>
</html>
显示效果：
第一段
第二段
第三段
第一段
第二段
第三段
第一段
第二段
第三段第一段
第二段第三段
第一段
b.子元素nth-child(n)系列选择器
上面的子元素选择器只能选择特定的子元素，我们可以通过nth-child(n)选择器来选择任意的子元素进行CSS控制，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>子元素选择器实例</title>
<style type="text/css">
<!--选择id为"t1"的标签下的第2个子p标签-->
#t1>p:nth-child(2){
color: yellow;
}
<!--选择id为"t2"的标签下的倒数第3个子p标签-->
#t2>p:nth-last-child(3){
color: red;
}
<!--选择div标签下第2个标签类型为p的子标签-->
div>p:nth-of-type(2){
color: pink;
}
<!--选择div标签下倒数第2个标签类型为span的子标签-->
div>span:nth-last-of-type(2){
color: purple;
}
</style>
</head>
<body>
<div id="t1">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<hr>
<div id="t2">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<hr>
<div>
<p>111</p>
<p>222</p>
<span>333</span>
</div>
<hr>
<div>
<p>111</p>
<span>222</span>
<br>
<span>333</span>
</div>
</body>
</html>
显示效果：
111
222
333
111
222
333
111
222
333111
222333
0×16.根元素选择器
在所有的css选择其中，除了全局选择器，还存在着一种特殊的选择器"根元素选择器"，这种选择器总是选择html标签，其样式影响整个html文档，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>根选择器实例</title>
<style type="text/css">
<!--根元素选择器，本例将给html文档添加一个2像素的虚线绿色边框-->
:root{
border: 2px dashed green;
}
</style>
</head>
<body>
<p>www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
0×17.UI伪类选择器
本例将介绍几种UI伪类选择器，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>UI伪类选择器实例</title>
<style type="text/css">
<!--当input标签是激活状态，匹配这个选择器-->
input:enabled{
border: 1px dashed green;
}
<!--可以使用ID选择器代替标签选择器，这样就只有这个ID所指定的标签会被匹配，本例，当id为"in2"的标签拥有"disabled"属性时匹配-->
#in2:disabled{
border: 1px dotted red;
}
<!--当id为"in3"的标签被选中时，隐藏这个标签-->
#in3:checked{
display: none;
}
</style>
</head>
<body>
<form>
<input type="text" enabled id="in1">
<br>
<input type="text" disabled id="in2">
<br>
<input type="checkbox" id="in3">
</form>
</body>
</html>
显示效果：
尝试着勾选上面的复选框，看看会不会自动隐藏？
如果现在有一个表单，我想让文本框没有输入数据时和输入数据完成验证后呈现两种不同的样子，就可以使用验证伪类选择器：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>UI伪类选择器实例</title>
<style type="text/css">
<!--文本框通过验证后的样子-->
#in1:valid,#in2:valid{
border: 1px dashed green;
}
<!--文本框没有输入数据前的样子-->
#in1:invalid,#in2:invalid{
border: 1px dotted red;
}
</style>
</head>
<body>
<form>
<input type="text" id="in1" placeholder="用户名" required>
<br>
<input type="email" id="in2" placeholder="邮箱" required>
</form>
</body>
</html>
显示效果：
当没有输入数据时，两个文本框都是圆点虚线红色边框，邮箱框输入的内容必须复合邮箱的格式，当格式复合要求后，文本框边框将变成绿色虚线。
下面介绍一个比较实用的UI伪类选择器，当文本框获取到光标焦点时匹配：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>UI伪类选择器实例</title>
<style type="text/css">
<!--当id为in4的标签获取到光标焦点时，为其添加一个边框-->
#in4:focus{
border: 2px dashed green;
}
</style>
</head>
<body>
<form>
<input id="in4">
</form>
</body>
</html>
显示效果：
鼠标点击上面的文本框，这个文本框将获取"焦点"，这将触发CSS选择器，为其添加一个绿色虚线边框。
0×18.超链接伪选择器的四种状态
超链接最常用的伪类选择器有四种，分别是：":link"未点击前、":visited"点击后、":hover"鼠标悬停时、":active"鼠标按下时；请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>超链接伪选择器实例</title>
<style type="text/css">
<!--未点击前，绿色点线边框-->
#qingweb:link{
border: 2px dotted green;
}
<!--鼠标悬停时，橙色虚线边框-->
#qingweb:hover{
border: 2px dashed orange;
}
<!--鼠标按下不放时，红色实线边框-->
#qingweb:active{
border: 2px solid red;
}
<!--被点击后，粉色点线边框-->
#qingweb:visited{
border: 2px dotted pink;
}
</style>
</head>
<body>
<a id="qingweb" href="http://www.qingsword.com" title="晴刃" target="_blank">www.qingsword.com</a>
</body>
</html>
显示效果：
0×19.否定选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>否定选择器实例</title>
<style type="text/css">
<!--选择p标签中class属性值不等于"p1"的所有标签，设置其文字颜色为橙色-->
p:not([class="p1"]){
color: orange;
}
</style>
</head>
<body>
<p class="p1">111</p>
<p class="p2">222</p>
<p class="p1">333</p>
</body>
</html>
显示效果：
111
222
333
0×20.空元素选择器
空元素选择器，将选择指定类别中不包含任何内容的那些标签：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>空元素选择器实例</title>
<style type="text/css">
<!--如果p标签中不包含任何内容，则将其隐藏-->
p:empty{
display: none;
}
</style>
</head>
<body>
<!--默认情况下，两个b之间有一个p空标签，那么这两个b标签不会显示在一行，他们被块状元素分隔了，块状元素会独占一行，相当于强制换行，但由于上面的空元素选择器隐藏了p标签，所以下面的内容将会在一行显示-->
<b>111</b>
<p></p>
<b>222</b>
</body>
</html>
显示效果：
111
222
0×21.匹配语言选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>语言选择器实例</title>
<style type="text/css">
<!--匹配p元素中lang属性值开头为en的那些标签-->
p:lang(en){
color: green;
}
<!--匹配p元素中lang属性值开头为zh的那些标签-->
p:lang(zh){
color: orange;
}
</style>
</head>
<body>
<p lang="en-us">www.qingsword.com</p>
<p lang="zh-cn">晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com
晴刃
0×22.锚点定位选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>锚点定位选择器实例</title>
<style type="text/css">
<!--当通过"锚点"定位到id值为t1的标签时触发这个选择器-->
#t1:target{
color: yellow;
}
</style>
</head>
<body>
<p id="t1">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
在浏览器地址栏"css-2.html"后面添加一个锚点"css-2.html#t1"，回车后将定位到此处，触发锚点定位选择器，将上面的网址的颜色更改成yellow。
0×23.伪类选定选择器
火狐目前（2016.06）不支持这种选择器，当鼠标选定（复制文本的那种选定）某段文本后，将触发伪类选定选择器：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>伪类选定选择器实例</title>
<style type="text/css">
<!--当鼠标选定id值为t2的标签中的内容时，将被选定的文字颜色更改成yellow-->
#t2::selection{
color: yellow;
}
</style>
</head>
<body>
<p id="t2">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
尝试用鼠标选择上面网址的内容（复制），被选中的部分文字颜色将会变成yellow。