一、其他选择器
简单聊聊：篇一提到的三种基础选择器其实并不能完全覆盖商业项目的开发场景，所以其他类型选择器的使用频率也非常高，所以还是建议记住，避免某一场景下为难。
1、通配选择器
简述：使用较少，优缺点都很明显，优→统一设置；缺→样式覆盖，降低代码执行效率。
推荐度：一星
2、组合选择器
简述：有五种常用的组合形式，在特定场景下或许有用。
推荐度：三星
①、子代选择器
使用（>符号）
div p {
color: red;
}
②、后代选择器
使用（空格分隔）
div p {
color: red;
}
③、相邻兄弟选择器
使用（+符号）
（介：相邻兄弟可以理解为亲兄弟，拥有同一父级）
h1 + p {
margin-top: 20px;
}
④、通用兄弟选择器
使用（~符号）
（介：通用兄弟可以理解为堂兄弟，拥有同一祖父级）
h1 ~ p {
color: green;
}
⑤、分组选择器
使用（逗号分隔）
h1, h2, h3 {
font-family: Arial, sans-serif;
}
3、伪类选择器
简述：伪类选择的种类很多，通常都是以（E：）形式展现（E代表标签名称/标签id名/标签class名等），同样是在特殊场景下进行使用。
推荐度：三星
①、动态伪类选择器
/* 未访问的链接 */
a:link {
color: blue;
}
/* 访问过的链接 */
a:visited {
color: purple;
}
/* 鼠标悬停链接 */
a:hover {
color: red;
}
/* 元素被点击时的链接 */
a:active {
color: yellow;
}
/* 元素获取焦点时的链接 */
a:focus {
color: yellow;
}
②、结构伪类选择器
/* 子元素选择器 */
a:first-child {
/* 选择每个父元素的第一个a元素 */
}
a:last-child {
/* 选择每个父元素的最后一个a元素 */
}
a:nth-child(n) {
/* 选择每个父元素的第n个a元素，n可以是数字、关键字或公式 */
}
/* 类型选择器 */
a:first-of-type {
/* 选择每个父元素下同类型a元素的第一个 */
}
a:last-of-type {
/* 选择每个父元素下同类型a元素的最后一个 */
}
a:nth-of-type(n) {
/* 选择每个父元素下同类型a元素的第n个，n同上 */
}
/* 唯一子元素选择器 */
a:only-child {
/* 选择每个父元素下唯一的a元素 */
}
a:only-of-type {
/* 选择每个父元素下同类型中唯一的a元素 */
}
/* 空元素选择器 */
a:empty {
/* 选择没有子元素的a元素 */
}
③、否定伪类选择器
/* 否定伪类 */
div:not(p) {
color: purple; /* 选择div中所有非p元素，并将其颜色设置为紫色 */
}
④、状态伪类选择器
（注意：动态伪类选择其实也归属于状态伪类选择器，只是为了方便记忆，所以区分拿出。）
/* 元素启用/禁用状态 */
input:enabled {
/* 选择每个启用的 <input> 元素 */
}
input:disabled {
/* 选择每个禁用的 <input> 元素 */
}
/* 表单元素状态 */
input:checked {
/* 选择每个被选中的 <input> 元素（仅用于单选按钮和复选框） */
}
select:default {
/* 选择默认选项（例如，在<select>元素中预先选定的选项） */
}
input:read-only {
/* 选择只读属性的元素 */
}
input:read-write {
/* 选择没有只读属性的元素 */
}
input:required {
/* 选择设置了"required"属性的元素 */
}
input:optional {
/* 选择没有设置"required"属性的元素 */
}
input:valid {
/* 选择所有验证正确的元素 */
}
input:invalid {
/* 选择所有验证错误的元素 */
}
⑤、目标伪类选择器
（注意：这是唯一一个目标伪类选择器，如果你的URL是http://example.com/#section2，那么:target选择器将会匹配ID为section2的元素。你可以使用这个选择器来为当前活动的目标元素设置特定的样式）
使用度不高，了解即可！
:target {
/* 选择当前活动的目标元素（即URL中#后面的部分所指向的元素） */
}
4、属性选择器
简述：属性选择器顾名思义，针对标签/元素的属性进行筛选，然后指定样式，使用范围度较小。
推荐度：两星
/* 存在性选择器 */
p[attr] {
/* 选择所有具有attr属性的p元素 */
}
/* 等于选择器 */
p[attr="value"] {
/* 选择所有attr属性等于"value"的p元素 */
}
/* 不等于选择器 */
p[attr!="value"] {
/* 选择所有attr属性不等于"value"的p元素 */
}
/* 开头选择器 */
p[attr="value"] {
/* 选择所有attr属性值以"value"开头的p元素 */
}
/* 结尾选择器 */
p[attr$="value"] {
/* 选择所有attr属性值以"value"结尾的p元素 */
}
/* 包含选择器 */
p[attr*="value"] {
/* 选择所有attr属性值中包含"value"的p元素 */
}
/* 特定选择符选择器 */
p[attr|="value"] {
/* 选择所有attr属性值是一个完整单词，且以"value"开头的p元素 */
}
二、选择器之间的权重与范围
1、选择器的范围
注意：这个顺序并不是绝对的，因为在实际应用中，选择器的包裹度还受到文档结构、样式表的顺序和特异性等因素的影响。
由大到小排序：
①通配符选择器—(*)
②元素/标签选择器（如 div、p）
③类选择器（如 .class）
④属性选择器（如 [type="text"]）
⑤伪类选择器（如 :hover、:active、:first-child 等）
⑥ID选择器（如 #id）
⑦复合选择器（如 div.class、#id:hover）
⑧后代选择器（如 div p）
⑨子选择器（如 div > p）
⑩相邻兄弟选择器（如 h1 + p）
⑪通用兄弟选择器（如 h1 ~ p）
2、选择器的权重
直述：ID选择器 > 类选择器/伪类选择器/属性选择器 > 元素选择器/伪元素选择器 > 通配符选择器/关系选择器/否定伪类 > 继承的样式
注意点：重要性标记（!important）：这不是选择器的一部分，但可以附加在任何样式的末尾，以使其权重高于其他所有非!important的样式。