css3选择器
我们之前学过 CSS 的选择符，比如：
通配符*{}、类名选择符.box{}、id选择符：#id名{}、群组选择符：p,h1,i,...{}、类型选择符：所有的HTML标签都能当成选择符来用、包含选择符：根据父元素找子元素。
那么在CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。
一、属性选择器
1、选择符[属性名]{}：只使用属性名，但没有确定任何属性值
2、选择符[属性名=“属性值”]：指定属性名，并指定了该属性的属性值
3、选择符[属性名~=“属性值”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，只要包含当前值就会被选中，而且等号前面的“〜”必须的
4、选择符[属性名^=“属性值”]：指定了属性名，并且有属性值，属性值是以value开头的 ，必须是当前属性值开头的
5、选择符[属性名$=“属性值”]：指定了属性名，并且有属性值，而且属性值是以value结束的 必须是当前属性值结束的
6、选择符[属性名*=“属性值”]：指定了属性名，并且有属性值，而且属值中包含了value
7、选择符[属性名|=“属性值”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style1.css">
<title>HTML5选择符</title>
<style>
*:root{
background: #d8fad7;
}
img[title]{
display: inline-block;
width: 200px;
height: 200px;
}
img[title="dog"]{
width: 300px;
height: 300px;
}
img[title~="girl"]{
width: 400px;
height: 400px;
}
img[title^="mu"]{
height: 200px;
width: 200px;
background: #ff7676;
}
img[title$="but"]{
background: #000000;
}
img[title*="b"]{
border: 5px solid #d00;
}
img[title|="ri"]{
border: rebeccapurple 10px solid;
}
</style>
</head>
<body>
<img src="./images/dog.png" alt="" >
<img src="./images/dog.png" alt="" title="ri-lot girl">
<img src="./images/dog.png" alt="" title="dog mm but">
<img src="./images/dog.png" alt="" title="mu dog ri">
</body>
</html>
二、伪类选择器
结构性伪类选择器
选择符:first-child 匹配子集的第一个元素。IE7就可以支持
选择符:last-child匹配父元素中最后一个X元素
选择符:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
选择符:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
选择符:nth-last-child(n)从最后一个开始算索引。
选择符:first-of-type匹配同类型兄弟元素中的第一个X元素
选择符:last-of-type匹配同类型兄弟元素中的最后一个X元素
选择符:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
选择符:only-of-type匹配属于同类型中唯一兄弟元素的X
选择符:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
**:root**匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
**X:empty**匹配没有任何子元素（包括包含文本）的元素X（当当前元素没有内容或者没有任何子元素的时候被选中）
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style1.css">
<title>HTML5选择符</title>
<style>
li:first-child{
background: orange;
}
li:last-child{
background: #d00;
}
li:nth-child(3){
background: #3d7bff;
}
li:nth-last-child(3){
background: #7500fc;
}
li:empty{
background: #1410ff;
}
p:only-child{
background: #40ff4a;
}
h3:first-of-type{
background: rgb(252, 183, 183);
}
h2:only-of-type{
background: #fbff00;
}
h3:nth-last-of-type(3){
background: #d00;
}
</style>
</head>
<body>
<nav>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
<h3>文字文字文字</h3>
<h2>文字文字文字</h2>
<li></li>
<li>文字文字文字</li>
<h3>文字文字文字</h3>
<h3>文字文字文字</h3>
<li>文字文字文字</li>
<li>文字文字文字</li>
<h3>文字文字文字</h3>
<h3>文字文字文字</h3>
<h3>文字文字文字</h3>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
</nav>
</body>
</html>
三、目标伪类
目标伪类选择器
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
a{
display:block;
width:100px;
height:50px;
background:red;
margin:10px auto;
}
div{
width:200px;
height:100px;
margin:10px auto;
text-align: center;
font-size:60px;
font-weight: 900;
}
div:target{
/* 当div被锚点连接指向：css背景发生变化 */
background:orange;
}
</style>
</head>
<body>
<a href="#box1">连接div1</a>
<a href="#box2">连接div2</a>
<a href="#box3">连接div3</a>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<!--
当点击a 对应的div发生背景的改变。
-->
</body>
</html>
四、UI 元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection 匹配E元素中被用户选中或处于高亮状态的部分
五、动态伪类选择器
E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
a{
font-size: 20px;
color: orange;
}
a:visited{
color: palegreen;
}
a:active{
color: peru;
}
a:hover{
color: orangered;
}
</style>
</head>
<body>
<a href="#">练习练习练习练习</a>
</body>
</html>
六、层级选择器
E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
你应该已经注意到了，子选择器使用了大于号（子结合符）。
子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：
h1 > strong h1> strong h1 >strong h1>strong
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
浙公网安备 33010602011771号