CSS的选择器分类如下图，其中最最常用的就是基础选择器中的三种：元素选择器、类选择器、id选择器。伪类选择器就是元素的不同行为、状态，或逻辑。然后不同的选择器组合，基于不同的组合关系，产生了6中组合关系选择器。
01、基础选择器（5）
1.1、通配选择器：*{}
针对所有HTML标签全部适用，选择器名=星号*（通配符），一般只做初始化使用。在 CSS3 中，星号 (*) 可以和命名空间组合使用，如 ns|*{}。
/* 通用选择器，针对所有标签 */
* {
color: black;
font-size: 15px;
box-sizing: border-box; margin: 0px; padding: 0px;
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
}
1.2、元素选择器：元素名{}
用元素名称作为选择器名称，如p、h1、div、img等，对作用域内所有该标签元素生效，所以常用来描述某一元素的共性。
hr {
margin: 32px 5px;
}
h1 {
background-color: lightblue;
text-indent: 0.5em;
}
1.3、类选择器：.类名{}
定义时前面加点.类名，在标签的属性“class”使用该样式，这应该算是最常用的选择器了。
/* 类名class选择器 */
.particle{
font-size: 18px;
font-family: 楷体;
}
.pindent{
text-indent: 2em;
}
<p class="particle pindent">一段文字内容-section</p>
类选择器可以给所有需要的元素使用，可同时给多个元素使用，应用广泛。
- 类名字母开头（小写），不能以数字开头。
- 同一个标签可以用多个类选择器，空格隔开。基于此，一般会将样式抽象、分类为多个类样式，便于复用。
1.4、id选择器：#id{}
用标签的id作为选择器名称，加井号“#”，针对作用域内指定id的标签生效，所以只能使用一次。
- ID是标签的唯一标识，不能重复。如果id重复，样式其实是会生效的，但查找元素（document.getElementById(id)）只会返回第一个。
- ID字母开头（小写），不能以数字开头。
/* id选择器 */
#a1{
color:blueviolet;
font-size: 16px;
text-decoration-line:underline ;
}
1.5、属性选择器：[属性=value]{}
元素都有属性，属性选择器是在其他选择器的基础上加上属性的筛选，用来筛选有特定属性、或属性值的元素，css3特性。这里的属性值匹配是大小写敏感的，结尾加上字符i（li[title*= "a" i]），则会忽略大小写敏感。
| 属性选择器 | 示例 | 描述 |
|---|---|---|
| [attr] |
li[title] .cli[title]
|
包含属性，筛选li元素且有属性title的元素 |
| [attr=value] | li[title="a"] |
包含属性+值相等，筛选li元素+title属性，且值为“a”的元素 |
| [attr^=value] | li[title^= "a"] |
属性值开头字符：开头字符匹配 |
| [attr$=value] | li[title$= "a"] |
属性值结尾字符：结尾字符匹配 |
| [attr*=value] | li[title*= "a"] |
属性值包含字符：包含字符匹配 |
| [attr~=value] | li[title~="a"] |
包含属性-值包含（完整单词），注意是值包含（如多个样式名，空格隔开的多个值），不是字符匹配包含，空格隔开的字符也算。 |
| [attr|=value] | li[title|="a"] |
包含属性-值开头（完整单词），同上，属性值是a，或开始为a且后面跟连字符-（中划线） |
<style>
li[title]{
color: red;
}
li[title="a"]{
font-weight: bold;
}
li[title~="a"]{
text-decoration: underline;
}
li[title|="a"]{
text-indent: 2em;
}
li[title^= "a"]{
text-shadow: 2px 2px 3px black;
}
li[title$= "a"]{
background: center url(../res/bimg.jpg);
}
li[title*= "a"]{
background-color: azure;
}
.cli[title]{
font-style: italic;
}
</style>
<ul>
<li title="a">item1：a</li>
<li title="a b">item2：a b</li>
<li title="c a b">item2</li>
<li title="a-b" class="cli">item4：a-b</li>
<li title="abc" class="cli">item5：abc</li>
<li title="cab" class="cli">item6：cab</li>
<li title="cba" class="cli">item7：cba</li>
<li title="cbA1" class="cli">item8：cbA1</li>
</ul>
02、伪类选择器（43）
2.1、伪类选择器:
伪类是选择器的一种，用于选择处于特定状态的元素。比如第一个元素、最后一个、奇数序列，或者是当鼠标指针悬浮时的状态。
伪类选择器开头为冒号
：，如a:hover{}表示a元素鼠标悬浮时的状态（样式）
和用户交互有关的伪类，也叫用户行为伪类，或叫做动态伪类，比如:link、:active、:visited、:hover。
| 交互状态伪类 | 描述（5） |
|---|---|
| :link | 匹配未曾访问的a链接。注意遵循 LVHA 的先后顺序:link >:visited > :hover > :active
|
| :visited | 匹配已访问a链接 (基于存在于浏览器本地的历史纪录)，（visited /'vɪzɪtɪd/ 访问 ） |
| :hover | 鼠标悬浮时：当用户悬浮到一个元素之上的时候匹配。(/ˈhɒvə(r)/ 盘旋、悬停) |
| :active |
鼠标按下时：在用户激活元素的时候匹配，一般被用在 <a> 和 <button> 元素 |
| :focus IE8 | 得到焦点（光标）：当一个元素有焦点的时候匹配，一般是输入表单。 |
????注意顺序：先
a样式，然后是他的LVHA。实际项目中，<a>的:link、:visited有时候会省略，合并到a样式中。
| （表单）状态伪类 | 描述（11） |
|---|---|
| :read-only IE???? |
readonly：匹配用户不可更改的元素，具有 readonly 属性的<input> 元素，也包括不能被用户编辑的元素 |
| :checked IE9 |
checked：匹配处于选中状态的radio(<input type="radio">)、checkbox或 <select>元素中的option
|
| :disabled IE9 |
disabled：匹配被禁用的元素，如input的disabled。 |
| :enabled IE9 | 启用状态：匹配处于开启状态的用户表单元素。 |
| :required IE10 |
required：匹配设置了required必填的 表单元素，如设置了required属性的<input>，<select>, 或 <textarea>元素。效果同属性选择器input[required]
|
| :optional IE10 | required相反，没有设置必填（optional：/ˈɑːpʃən(ə)l/ ，可选的） |
| :in-range IE???? |
input.value：代表一个 <input type="number"> 元素，其当前值处于属性min 和max 限定的范围之内。 |
| :out-of-range IE???? |
input.value：与:in-range相反，当值不在区间内的的时候匹配。 |
| :invalid IE11 | 匹配内容未通过验证的 <input> 或其他 <form> 元素 |
| :valid IE10 | 匹配内容验证正确的<input> 或其他 <form> 元素 |
| :indeterminate IE10 | 表示状态不确定的表单元素，一般为复选框、单选框（一组都没有被选中）。（ /ˌɪndɪˈtɜːrmɪnət/不确定的） |
| 结构伪类/元素查找 | 描述（13） |
|---|---|
| :first-child IE7 | 匹配的元素&是其父元素的首个子元素，就是有2个条件，匹配冒号前的选择器+是其父元素的第一个子元素。 |
| :last-child IE9 | 匹配的元素&是其父元素的最后一个子元素，匹配的元素必须是其父元素的最后一个元素 |
| :first-of-type IE9 | 匹配的元素的第一个：匹配兄弟元素中第一个某种类型的元素，注意是兄弟元素的第一个 |
| :last-of-type IE9 | 匹配的元素的最后一个：匹配兄弟元素中最后一个某种类型的元素。 |
| :only-child IE9 |
匹配的元素的没有任何兄弟（也无子元素）：没有任何兄弟（包括没匹配的），等效:first-child:last-child
|
| :only-of-type IE9 | 匹配的元素的没有兄弟（无子元素）：匹配兄弟元素中某类型仅有的元素，允许其他未匹配的兄弟元素。 |
| :nth-child(2n+1) IE9 |
匹配的元素的按序号选择：①所有兄弟元素按分组排序：首先找到所有兄弟元素（所有：包括其他未匹配的同级的兄弟元素），从1开始；②计算序号：参数为序号表达式（n=0/1/2...）；③定位元素：只对匹配的元素生效 ● 参数 **n**：匹配序号1/2/3/4/5/6/7...自然数列；参数**3**：匹配序号3元素。（nth /enθ/ 第n个的，最近的）● 参数 **2n+1**：匹配序号1/3/5/7...奇数，=参数odd；参数**2n**：匹配序号2/4/6/8...偶数，=参数even● 如果序号是没有匹配的兄弟元素，当然就不生效了！没有匹配的兄弟元素只参与排序 |
| :nth-of-type(2n+1) IE9 |
匹配的元素的按序号选择：①匹配到的元素按分组排序；②计算序号：参数为序号表达式（n=0/1/2...）；③定位元素：只对匹配的元素生效。与:nth-child不同点是排序元素只有匹配的。 |
| :nth-last-child IE9 |
匹配的元素的按倒序号选择：同:nth-child，所有兄弟元素排序从后往前 |
| :nth-last-of-type IE9 |
匹配的元素的按倒序号选择：同:nth-of-type，匹配到的元素排序从后往前 |
| :empty IE9 | 匹配没有子元素的元素：包括文本、换行都算是子元素，除了空格、注释。 |
| :target IE9 |
当前锚点的元素，匹配当前URL指向的id值的元素：url#id
|
| :root IE9 | html根元素：匹配文档的根元素，就是html元素，常用于全局css变量申明。 |
| 逻辑条件伪类 | 描述（2） |
|---|---|
| :not (参数选择器) IE9 | 匹配不符合参数选择器的所有元素，多个逗号隔开，不支持复杂的选择器 |
| :is (参数选择器) IE???? | 匹配指定选择器列表里的元素，多个逗号隔开，不支持复杂的选择器 |
| 其他伪类 | （4） |
| @page :first | 打印文档的时候，第一页的样式 |
| @page :left | 打印文档的左侧页设置 CSS 样式，和@page 配套使用 |
| @page :right | 打印文档的所有右页，和@page 配套使用 |
| :lang | 基于语言（HTMLlang属性的值）匹配元素。语言是通过lang 属性，和 <meta> 元素的组合来决定的 |
表单文本框的校验状态样式示例：
<style>
:root {
/*申明css全局变量*/
--error-color: red;
}
#vtag input:required+label::before{
content: "*";
color:var(--error-color);
}
#vtag input:in-range{
border:green 1px solid;
color: green;
margin: 20px 0;
}
#vtag input:out-of-range{
border:red 1px solid;
color:var(--error-color);
margin: 20px 0;
}
#vtag input:out-of-range+label::after{
content: "，值必须在1到10之间";
color:var(--error-color);
}
</style>
<div >
年龄：
<input type="number" value="13" required>
<label for="t3"></label>
</div>
表格结构选择类样式：表头高亮样式；隔行换色，第一列高亮+排名次
<style>
#vtb{
border-collapse: collapse;
width: 300px;
text-align: center;
border: 2px black solid;
}
#vtb tr:first-child th{ /*标题行样式*/
background-color:blueviolet;
font-weight: bold;
color: white;
}
#vtb tr:nth-of-type(2n+2){ /*隔行换色*/
background-color: rgb(197, 239, 245);
}
#vtb tr:nth-of-type(2n+3){
background-color: rgb(230, 245, 201);
}
#vtb tr td:first-child{ /*第一列的样式*/
font-weight: bold;
color: blue;
background-color: lightpink;
text-align: left;
text-indent: 3px;
}
#vtb tr:nth-of-type(2) td:first-child::before{ /*添加排名序号*/
content: "????";
}
#vtb tr:nth-of-type(3) td:first-child::before{
content: "????";
}
#vtb tr:nth-of-type(4) td:first-child::before{
content: "????";
}
</style>
<!-- 表格效果：表头高亮样式；隔行换色，第一列高亮+排名次 -->
<table >
<tr>
<th>姓名</th><th>分数</th><th>学号</th>
</tr>
<tr>
<td>张三</td><td>r1-2</td><td>r1-3</td></tr>
<tr>
<td>周伦</td><td>r2-2</td><td>r2-3</td>
</tr>
<tr>
<td>李子柒</td><td>r3-2</td><td>r3-3</td>
</tr>
<tr>
<td>王小二</td><td>r4-2</td><td>r4-3</td>
</tr>
</table>
2.2、伪元素选择器::
伪元素，顾名思义，像元素但不是真正的元素。基于一些预定的规则，像一个新的元素一样的虚拟元素，如段落中的第一行。
伪元素用双冒号开头
::，如p::first-line{}，不过有早期版本的伪元素是单冒号开头的。
| 伪元素选择器 | 描述（8） |
|---|---|
| ::after IE9 | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
| ::before IE9 | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
| ::first-letter IE9 | 匹配元素的第一个字符。 |
| ::first-line IE9 | 匹配元素的第一行。 |
| ::selection | 被选中：匹配文档中被选择的那部分，可用来自定义文本选中样式 |
| ::grammar-error | 匹配文档中包含了浏览器标记的语法错误的那部分。 |
| ::spelling-error | 匹配文档中包含了浏览器标记的拼写错误的那部分。 |
| ::placeholder IE???? | 表单元素的占位文本placeholder |
✏️可插入内容的
::before、::after伪元素，是一组特别的伪元素，配合content属性，可用css插入（文本）内容（插入的内容不可选中）。
<style>
#vtag p:first-child::first-letter {
font-size: 200%;
}
#vtag p:first-child::first-line {
color: red;
}
/* 插入内容并设置其样式（无法选中） */
#vtag p:first-child::after {
content: "——《四书五经》";
color: cornflowerblue;
font-size: 80%;
}
/* 设置文字选择状态样式 */
#vtag p::selection{
color:white;
background-color: #ff0000;
}
</style>
<div >
<p>出必告，反必面，居有常，业无变。</p>
<p>湖畔大学的梁宁曾说过：「要找到那件能让你一直不厌其烦做下去的事，你不厌其烦的地方，就是你的天分所在。追随内心，做自己喜欢的事，时间久了，你就会成功。」</p>
</div>
03、组合关系选择器（6）
3.1、合并/并集选择器：逗号
多种基础选择器的合并组合，相当于大家共用一个样式设置，选择器名字用逗号,隔开。
选择器1, 选择器2, 选择器3, ... { } 例如：
div, #su1, .user{...}
<style type="text/css">
pre, /* 标签名选择器 */
#a1, /* id选择器 */
.f1 /* 类名class选择器 */
{
color: skyblue;
font-weight: bold;
}
</style>
3.2、交集选择器：紧密相连
多个选择器拼接，中间无任何连接符（利用选择器本身的前缀分割），不能有空格，选择 都同时满足的元素。
选择器1选择器2选择器3... { }
a.nav.left[href]{
background-color: #0000ff;
}
.form-float a.nav{ /*两个交集，组合成一个后代选择器*/
color: white;
}
3.3、后代选择器：空格
用空格分割，选择指定元素的** 符合选择器条件 **的 所有后代 元素，注意这里的“后代”，即所有子元素都是筛选目标，不限等级，可跨级。支持多个层级，从第一个选择器（祖父）的开始，一直往下递归，所有符合条件的后代，最后一个选择器为目标元素。
祖父 后代1 后代2 ... 后代n(递归后代n) { }
<style>
.f1 p{
color: red;
}
.f1 .f2 p{
font-weight: bold;
}
</style>
<div class="f1">
<p class="f2">子代</p>
<div class="f11">
<p>孙代</p>
<div class="f111">
<p>曾孙</p>
</div>
</div>
<div class="f2">
<p>孙代2</p>
</div>
</div>
3.4、子代选择器：大于号>
用大于号>分割，查找指定元素的子元素&第一代（儿子）元素中符合所有条件的元素。不同于后代选择器，只在第一代中找。
父>后代1>后代2>...>后代n { }
.f1>p{
background-color: antiquewhite;
}
.f1>.f2>p{
text-indent: 2em;
}
3.5、相邻兄弟选择器：加号+
用加号+分割，查找指定元素相邻&同级的后一个指定元素，二者有相同的父元素且相邻，中间不可间隔。只向后找一个，要求有点多。
胸弟1+兄弟2+...+兄弟n(第一个兄弟n) { }
.fb2+.fb3{
font-weight: bold;
}
.fb2+p+p{
color: red;
}
<div class="fb1">
<p class="fb2">子代</p>
<p class="fb3">兄弟1</p>
<p class="fb4">兄弟3</p>
<div class="fb11">
<p>孙代</p>
<div class="fb111">
<p>曾孙</p>
</div>
</div>
<p class="fb2">兄弟3</p>
</div>
3.6、普通兄弟选择器：波浪线~
用波浪线~分割，查找指定元素同级的所有指定兄弟元素，有相同的父元素，符合条件的都会被找出来。不同于相邻兄弟选择器，不用相邻，多个结果。
兄弟1~兄弟2~...~兄弟n(所有同级兄弟n) { }
.fb2~p{
text-indent: 1em;
}
.fb2~.fb3~p{
text-indent: 2em;
}
©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀