css3选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）css3选择器分类如下图所示：
1、基本选择器
基本选择器是CSS中使用最频繁，最基础，也是CSS中最早定义的选择器。如图所示
1-1 通配选择器
*{
padding:0;
margin:0;
}
“ * ”用来选择所有元素。表示所有元素的内外边距都是0。
1-2 通配符选择器
p{
height:10px;
width:10px;
}
表示p元素的宽高为10px。
1-3 ID选择器
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#123{
width:10px;
height:10px;
}
</style>
</head>
<body>
<div id="123">选择的是这个</div>
<div>456</div>
</body>
</html>
在使用ID选择器之前，需要在HTML文档中给对应的元素设置id属性并设置值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不能同时出现id相同的属性值。在CSS样式中使用id选择器时，需要在id属性值的前面加上“#”号，如(#id)。
1-4 类选择器
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.yxz{
width:10px;
height:10px;
}
</style>
</head>
<body>
<div class="123">abc</div>
<div>456</div>
</body>
</html>
在使用ID选择器之前，需要在HTML文档中给对应的元素设置class属性并设置值，才能找到对应的元素。但与ID选择器不同的是，类选择器在一个页面中可以有多个相同的类名，而ID选择器的ID名在整个页面中只能有一个。在CSS样式中使用类选择器时，需要在属性值的前面加上点号(.)，如(.class)。
1-5 群组选择器
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1,h2{
heigh:10px;
width:20px;
font-size:14px;
}
</style>
</head>
<body>
<h1>123</h1>
<h2>456</h2>
</body>
</html>
将具有相同样式的元素分组在一起，每个选择器之间用逗号(,)隔开。表示h1,h2具有相同的样式。
2、层次选择器
通过后代、父子、相邻以及通用几种关系选择需要元素。如图所示：
2-1 后代选择器
<!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>
*{
padding:0；
margin:0；
div p{
background:orange;
}
</style>
</head>
<body>
<div>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2h2h2h2h2</h2>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
</div>
</body>
</html>
div和p之间一定要空格隔开。效果图所示：
表示被div包含的p标签。
2-2 子选择器
<!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>
*{
padding:0;
margin:0;
}
div>p{
background:orange;
}
</style>
</head>
<body>
<div>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2h2h2h2h2</h2>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
</div>
</body>
</html>
效果如图所示：
表示选中父元素div下面的子元素p标签。
2-3 相邻兄弟选择器
相邻兄弟选择器(E+F)可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。
<!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>
*{
padding:0;
margin:0;
}
h2+p{
background:orange;
}
</style>
</head>
<body>
<div>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2h2h2h2h2</h2>
<h2>h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
</div>
</body>
</html>
效果如图所示：
表示h2紧接的第一个p标签，而不是所有的p标签。
2-4 通用兄弟选择器
用于选择某元素后面的所有兄弟元素，它们也具有相同的父元素。
<!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>
*{
padding:0;
margin:0;
}
h2~p{
background:orange;
}
</style>
</head>
<body>
<div>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2h2h2h2h2</h2>
<h2>h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
<p>ppppppppppppppp</p>
<h2>h2h2h2h2h2</h2>
<h2>h2h2h2h2h2h2h2</h2>
<p>ppppppppppppppp</p>
</div>
</body>
</html>
效果如图所示：
表示h2后面的所有p标签。
3、伪类选择器
css3中的伪类选择器可以分成5种：动态伪类选择器，目标伪类选择器，UI状态伪类选择器，结构伪类选择器和否定伪类选择器。如图所示：
3-1 动态伪类选择器
顾名思义，是发生交互时才体现出来
例子：focus获取焦点
<!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>
input:focus{
background:yellow;
border:10px solid pink;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
效果图
当鼠标移动到第二个方框中发生交互效果。
3-2 目标伪类选择器
目标伪类选择器“:target”用来匹配文档链接中的URI中某个标识符的目标元素。
<!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>
<div id="box1">1</div>
<div id="box2">2</div>
</body>
</html>
效果图所示：
当点击“连接div2”时，下方“2”区域发生背景颜色变化。
3-3 UI元素状态伪类选择器
主要用于form表单元素上，UI元素的状态一般包括：启用，禁用，选中，未选中等。常用的有：
E:enabled
匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled
匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked
匹配所有用户界面（form表单）中处于选中( 单选、多选 )状态的元素E
E::selection
匹配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>
input:enabled{
background:pink;
}
input:disabled{
background:blue;
}
</style>
</head>
<body>
<input type="text">
<br>
<input type="text" disabled>
<br>
<input type="text" disabled>
<br>
<input type="text" disabled >
<br>
<input type="text">
</body>
</html>
效果图
粉色区域为可用状态，点击后框内有光标。蓝色区域为不可用状态。
3-4 结构性伪类选择器
结构性伪类选择器：( 选择谁 选择符就行写谁 )
a：如果子集标签类型一致（类名一致）的情况下：采用的是 child
1 : 选择符:first-child{ }
2 : 选择符:last-child{ }
3 : 选择符:nth-child(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-child(){} 倒数第几个
5 : 选择符:only-child{} 当前子集只有一个元素的时候才会被选择
b：如果子集合标签类型不一致（类名不一致）的情况下：采用的是 of-type
1 : 选择符:first-of-type{ }
2 : 选择符:last-of-type{ }
3 : 选择符:nth-of-type(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-of-type(){} 倒数第几个
5 : 选择符:only-of-type{} 当前子集只有一个元素的时候才会被选择
<!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>
ul:nth-child(2) li:nth-child(3){
background:orange;
}
</style>
</head>
<body>
<ul>
<li>123</li>
<li>123</li>
</ul>
<ul>
<li>老虎</li>
<li>老虎</li>
<li>老虎</li>
</ul>
</body>
</html>
效果图:
表示选中的是第二个列表当中的第三个。
3-5 否定伪类选择器
否定伪类选择器“:not()”主要用来定位不匹配该选择器的元素。
4、伪元素
css3中，规定伪元素由两个冒号开头作为表示。（可能会改变dom结构，创造虚拟dom）
常用的两个伪元素“::before”和"::after"。这两个伪类会再选择的元素前或后创建虚拟dom，常和content联用。
还有其他伪元素，"::first-line" "::first-letter" " ::selection"。
例子：
<!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>
p::before{
content:"a";
color:blue;
}
p::after{
content:"b";
color:red;
}
</style>
</head>
<body>
<p>123</p>
</body>
</html>
效果图
表示在“123”之前加上了一个蓝色的a，之后加上了一个红色的b。
5、属性选择器
通过各种属性给元素添加信息。语法如下：
1: 选择符[属性名] 只要带有当前属性名就会被选中。
2: 选择符[属性名="属性值"] 不仅制定属性名，有指定属性值
3: 选择符[属性名~="属性值"] 属性值为一个词列表，只要包含当前词就会被选中
4: 选择符[属性名^="属性值"] 属性值必须是当前指定的属性值开头的
5：选择符[属性名$="属性值"] 属性值必须是当前指定的属性值结尾的
6: 选择符[属性名*="属性值"] 属性值中只要包含了指定的字符就会被选中
7: 选择符[属性名|="属性值"] 属性值仅是当前指定的属性值
例子：
<!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>
em{
display:inline-block;
width:16px;
height:16px;
}
li[class="pic"] em{
height: 10px;
width: 10px;
background-color: red;
}
li[class="html"] em{
height: 10px;
width: 10px;
background-color: black;
}
</style>
</head>
<body>
<ul>
<li class="pic">brucebrucebruce.jpg <em></em></li>
<li class="pic">bruce.png <em></em></li>
<li class="pic">bruce.gif <em></em></li>
<li class="html">index.html <em></em></li>
<li class="html">case.html <em></em></li>
<li class="txt">txt.doc <em></em></li>
<li class="html">nihao.html <em></em></li>
</ul>
</body>
</html>
效果图下图所示：
表示选中属性名为pic后面的em属性，选中属性名为html后面的em属性。
欢迎补充。
