目录
1、基本选择器
1）标签选择器
标签选择器指用HTML元素的标签名做选择器的名字。被标签选择器定义的样式，所有同名HTML标签都会自动套用该样式，我们通常把所有同类标签都相同的样式标签选择器定义。
//直接使用div标签选择 并添加样式
div{
color:red;
font-size:16px;
}2）id选择器
id选择器以“#”开头，选择器名称自定义，可以包含字母、数字、下划线或美元符号，必须以字母或下划线开头，id选择器定义的样式，HTML中具有同名id属性的元素会套用，HTML元素的id选择器属性必须是唯一的，因此，一个id选择器样式唯一对应一个HTML元素，我们通常把元素特有的样式用id选择器来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div id="aa">
id选择器
</div>
</body>
</html>
3）类选择器
类选择器是以“.”开头，选择器名称自定义，可以包含字母、数字、下划线或美元符号，必须以字母或下划线开头。类选择器定义样式，HTML元素包含同名 class 属性的元素会套用，多个 HTML 元素可以拥有相同的 class 属性值，因此一个类选择器样式可以被多个 HTML 元素套用，我们通常把多个 HTML 元素共有的样式用类选择器来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aa{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div class="aa">
类选择器
</div>
</body>
</html>
4）通配选择器
通配选择器用 “*” 表示，*{} 该选择器表示选中页面的所有元素。
2、交集选择器
交集选择器是由两个选择器直接连接构成的，selector1.selector2,其中selector1必须是标签选择器，selector2可以是类别选择器、id选择器、或伪类选择器、伪元素选择器，两个选择器之间不能有空格，必须连续书写。
p.one{
color:red;
font-size:16px;
}
h1#two{
font-size:30px;
color:blue;
}3、派生选择器
1）后代选择器
selector1 selector2selector1 和 selector2 可以是任意类型的选择器，他的选择范围是selector1 后代中的 selector2。只要 selector2 是 selector1 的后代元素都可以被选中，后代选择器中两个元素之间的层次间隔可以是无限的。
2）子元素选择器
selector1 > selector2子元素选择器只能选择 selector1 选择范围内元素的直接子元素。
3）兄弟选择器
selector1 ~ selector2兄弟选择器是在选择器 selector1 所选择元素后面的、并且拥有相同父节点的元素中查找符合sekector2 条件的元素，也就是说 selector1 同父元素且在 selector1 后的所有 selector2。
4）邻居选择器
selector1 + selector2邻居选择器和兄弟选择器类似但是它只选择 selector1 所选择元素后面的且拥有相同父节点元素的第一个元素。
4、属性选择器
1）简单属性选择器
简单属性选择器只有属性名，表示只要有这个属性，不管值是什么，都会被选择。
//具有 href 属性的 <a> 元素
a[href] {color : red;}
//具有 type 属性的所有元素
*[type] {color : red;]2)具体属性选择器
除了拥有属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
//选择所有表单元素中仅选择文本框元素
input[type="text"]{background:yellow;}3）子串属性选择器
具有属性选择器中的属性值必须完全匹配的时候才能被选择，CSS还提供了5中子串属性选择器，只要元素属性值中包含选择器中设定的值，就会被选中。
| 类型 | 描述 |
| [attr^="val"] | 选择attr属性值以 val 开头的所有元素 |
| [attr$="val"] | 选择attr属性值以 val 结尾的所有元素 |
| [attr*="val"] | 选择attr属性值中包含子串 val 的所有元素 |
| [attr~="val"] | 选择attr属性值中包含 val 的元素， val 是一个独立的属性值 |
| [attr|="val"] | 选择attr属性值以 val 开头的所有元素，val 必须是一个单词 |
5、伪类选择器
1) :first-child 和 ：last-child
伪类选择器 :first-child 选择第一个元素，伪类选择器 :last-child 选择最后一个元素。他们的使用方式都一样，一个是从前往后选，一个是从后往前选。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择第一个p元素 */
p:first-child{
color: red;
font-size: 20px;
}
/* 选择最后一个p元素 */
p:last-child{
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<p>第1个段落</p>
<p>第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
</div>
</body>
</html>
2) :nth-child(n)
:nth-child(n) 的使用原则和 :first-child 相同，这里的参数 n 可以是数字、关键字或公式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p:nth-child(1){
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>第1个段落</p>
<p>第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
</div>
</body>
</html>
参数 n 可以使用 odd 和 even 关键词代替，odd 表示排序为奇数的元素， even 表示排序为偶数的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择奇数的元素1、3 */
p:nth-child(odd){
color: red;
font-size: 20px;
}
/* 选择偶数的元素2、4 */
p:nth-child(even){
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>第1个段落</p>
<p>第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
</div>
</body>
</html>3）状态伪类
| 选择器 | 描述 | 常用标签 |
| :link | 未被访问的元素 | <a> |
| :visited | 已被访问的元素 | <a> |
| :hover | 鼠标指针位于元素上 | <a> |
| :active | 鼠标指针在元素上左键被按下还没有松开 | <a> |
| :focus | 获取焦点的元素 | <input> |
| :checked | 被选中的元素 | <input> |
6、伪元素选择器
| 选择器 | 描述 |
| :first-letter | 内容文本的第一个字母 |
| :first-line | 内容文本的第一行字母 |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
7、结构伪类选择器
1、:root
:root 选择器可以匹配文档根元素，在 HTML 中，根元素始终是 HTML 元素，因此当 :root 单独使用时，就表示 <html> 标签，也可以和后代选择器配合使用，表示指定范围内的元素
2、:not
:not 选择器的完整用法是 ":not(selector)" 匹配非指定元素/选择器的每个元素，这个选择器在使用时要慎重。例如以下代码，本意是想将 <h1> 和 <div> 两个标签中的文字设置为红色，但是运行后会发现所有文字的颜色都变为红色。这是因为 :not 选择器相对于整个网页匹配非 <p> 元素，所以 <body> 、<html> 都在选择范围之内。有以下两种修改方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
:not(p){
color: red;
}
</style>
</head>
<body>
<div>
<h1>标题标签</h1>
<p>第1个段落</p>
<p>第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
<div>div标签</div>
</div>
</body>
</html>
1）通过后代选择器缩小选择范围
如果把选择范围定义在 <body> 标签的子元素，那么除 <p> 标签外的标签就只有 <h1> 和 <div>。因此修改选择器":not(p)" 为 "body>:not(p)" 通过后代选择器把选择范围定义在 <body> 标签的所有直接子元素。
2）重定义 <p> 标签样式
还可以在 css 样式表中重定义 <p> 标签样式，设置字体颜色为黑色。
<style type="text/css">
:not(p){
color: red;
}
p{
color: black;
}
</style>3、:empty
:empty 选择器用于匹配没有子元素的每个元素，所有单标签一定不包含子元素，所以都属于 :empty 选择器的选择范围，对于双标签，只有开始标签和结束标签紧紧相连的情况下才符合，哪怕只有一个空格，也不会被选中。
:empty 选择器可以和交集选择器结合使用，用于限定某一种标签的非空元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择没有子元素的 p 标签 */
p:empty{
background-color: red;
height: 30px;
}
</style>
</head>
<body>
<div>
<p>第1个段落</p>
<p>第2个段落</p>
<p> </p><!-- 有空格也不会被选中 -->
<p></p>
</div>
</body>
</html>
4、:only-child
:only-child 选择器用于匹配属于父元素的唯一子元素的每个元素，通常和交集选择器结合使用，用于限定某一种标签的父元素只有它一个子元素。如以下代码运行后发现只有“我是唯一的”段落会添加样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p:only-child{
background-color: red;
height: 30px;
}
</style>
</head>
<body>
<div>
<p>我是唯一的</p>
</div>
<div>
<span></span>
<p>我有一个兄弟</p>
</div>
</body>
</html>
5、:target
:target 选择器可用于选取当前活动的目标元素。URL 后面跟有锚名称 # ，用于执行文档内某个具体的元素，这个被链接的元素就是目标元素。设置了这个选择器后，当单击锚记链接转跳到目标位置时，目标元素就会应用选择器样式。
2415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
