CSS：选择器 / 14种类型

理解css选择器

CSS选择器是CSS（层叠样式表）中的关键部分，它允许开发者指定哪些HTML元素应该被应用一组特定的样式规则。选择器可以非常具体，只针对一个元素，也可以相当宽泛，影响多个元素。理解CSS选择器对于创建响应式、美观且功能丰富的网页至关重要。

一、标签/类型/元素选择器

类型选择器（也称为元素选择器）基于HTML元素的名称来选择元素。例如，p选择器会选择所有<p>元素。

p {  
  color: blue;  
}

二、类选择器

类选择器通过HTML元素的class属性来选择元素。在CSS中，类选择器以点号.开头，后跟类名。例如，.intro选择器会选择所有class="intro"的元素。

.intro {  
  font-weight: bold;  
}

三、id选择器

ID选择器通过HTML元素的id属性来选择元素。ID在HTML文档中必须是唯一的。在CSS中，ID选择器以井号#开头，后跟ID名。例如，#header选择器会选择id="header"的元素。

#header {  
  background-color: yellow;  
}

四、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。例如，选择所有带有type="text"属性的<input>元素。

[attribute] {  
  /* CSS 规则 */  
}  
  
[attribute="value"] {  
  /* 当属性值完全等于"value"时应用的CSS规则 */  
}  
  
[attribute^="value"] {  
  /* 当属性值以"value"开头时应用的CSS规则 */  
}  
  
[attribute$="value"] {  
  /* 当属性值以"value"结尾时应用的CSS规则 */  
}  
  
[attribute*="value"] {  
  /* 当属性值中包含"value"时应用的CSS规则 */  
}  
  
[attribute|="value"] {  
  /* 选择其属性值等于"value"或以"value-"开头的元素（适用于语言代码等） */  
}

五、后代选择器

后代选择器通过空格分隔两个选择器，以选择第一个选择器的后代中符合第二个选择器的元素。例如，div p会选择所有<div>元素内的<p>元素。

div p {  
  font-size: 14px;  
}

六、子选择器

子选择器通过>符号选择直接子元素。例如，ul > li会选择所有直接位于<ul>元素内的<li>元素，但不会选择嵌套的<li>元素内的<li>。

ul > li {  
  list-style-type: none;  
}

七、伪类选择器

伪类选择器用于定义元素的特殊状态，如:hover（鼠标悬停时）、:active（元素被激活时，如鼠标点击时）等。

a:hover {  
  color: red;  
}

八、通用选择器

在CSS中，通用选择器（也称为通配符选择器）是一个星号（*）字符，它可以匹配文档中的任何元素。使用通用选择器时，你可以为页面上的所有元素设置样式，但通常这并不是最佳实践，因为它可能会导致性能问题，并且使得样式表难以维护。然而，在某些情况下，它仍然可以非常有用。

通用选择器的使用

8.1、为所有元素设置样式

* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}

在这个例子中，通用选择器被用来为所有元素设置margin、padding和box-sizing属性。这是一个常见的CSS重置或标准化做法，目的是去除不同浏览器之间默认样式的差异，并提供一个更加一致和可预测的起点。

8.2、结合其他选择器使用

虽然通用选择器可以单独使用，但它也可以与其他选择器结合使用，以提供更具体的选择。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。

div * {  
  color: blue;  
}

在这个例子中，div *选择器会选择所有<div>元素内的元素，并将它们的文本颜色设置为蓝色。但是，这并不是说*只选择了<div>元素内部的元素；而是选择了所有元素，但样式只应用到了那些同时也在<div>元素内部的元素上。

8.3、注意事项

8.3.1、性能影响：虽然现代浏览器的性能已经足够好，可以处理大量的CSS规则，但滥用通用选择器（尤其是在大型项目中）仍然可能导致性能问题。这是因为浏览器需要遍历DOM树中的每个元素，并检查它们是否匹配选择器。

8.3.2、维护性：使用通用选择器会使样式表变得难以维护，因为很难快速确定哪些元素受到了哪些样式的影响。

8.3.3、最佳实践：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。如果确实需要重置或标准化样式，请考虑使用CSS重置库（如Normalize.css）或编写自己的、更具体的重置规则。

九、群组选择器

在CSS中，群组选择器（也称为组合选择器）允许你同时选择多个选择器，并对它们应用相同的样式规则。这可以极大地减少代码重复，并使得样式表更加简洁和易于维护。群组选择器通过逗号（,）分隔不同的选择器来实现。

h1, h2, p {  
  color: blue;  
}

十、相邻同胞 / 相邻兄弟选择器

相邻兄弟选择器使用+符号，它选择紧接在另一元素后的元素，且二者有相同的父元素。例如，h2 + p会选择紧跟在<h2>元素之后的<p>元素。

h2 + p {  
  margin-top: 0;  
}

十一、通用兄弟选择器

通用兄弟选择器使用~符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。例如，h2 ~ p会选择所有<h2>元素之后的<p>兄弟元素。

h2 ~ p {  
  color: green;  
}

十二、伪元素选择器

伪元素选择器用于样式化元素的特定部分，如:before和:after，它们在所选元素的内容前后添加新内容。

p::before {  
  content: "注意：";  
  color: red;  
}

十三、结构性伪类选择器

CSS中的结构性伪类选择器是一种特殊的选择器，它允许你根据元素在文档树中的位置来选择元素。这些选择器对于实现复杂的布局和样式效果非常有用，尤其是在没有直接的方法来通过HTML结构或类名选择元素时。

结构性伪类选择器
序号	选择器	解释
1	:root	选择文档的根元素，即`<html>`元素
2	:nth-child(n)	选择属于其父元素的第n个子元素的每个元素。`n`可以是数字、关键词（如`odd`和`even`），或者公式（如`2n+1`表示奇数）
3	:nth-last-child(n)	与`:nth-child(n)`类似，但它是从父元素的最后一个子元素开始计数的
4	:nth-of-type(n)	选择属于其父元素中特定类型（如`<p>`或`<div>`）的第n个子元素。与`:nth-child(n)`不同，这里只考虑特定类型的元素。
5	:nth-last-of-type(n)	与`:nth-of-type(n)`类似，但它是从父元素的最后一个特定类型的子元素开始计数的
6	:first-child	选择属于其父元素的第一个子元素的每个元素
7	:last-child	选择属于其父元素的最后一个子元素的每个元素
8	:only-child	如果一个元素是其父元素的唯一子元素，则选择该元素
9	:only-of-type	如果一个元素是其父元素中特定类型的唯一子元素，则选择该元素
10	:empty	选择没有子元素的元素（包括文本节点）。注意，空格和换行符也被视为子节点，因此这些元素不会被视为空。
11	:not(selector)	选择除了特定选择器匹配的元素之外的所有元素。这是一个功能强大的伪类，允许你排除掉不需要应用样式的元素
12	:first-of-type 和 :last-of-type	这两个伪类分别选择其父元素中特定类型的第一个和最后一个子元素。它们与`:first-child`和`:last-child`相似，但仅考虑特定类型的子元素
结构性伪类选择器极大地增强了CSS的灵活性和表达能力，使得开发者能够基于元素在文档中的位置来应用样式，而不仅仅是基于它们的类型、类或ID。这有助于创建更加动态和响应式的网页布局

十四、UI元素伪类选择器

CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。这些伪类选择器允许你根据元素的当前状态来应用不同的样式规则，从而改善用户体验和界面的交互性

UI元素伪类选择器
序号	选择器	解释
1	:link	选择所有未访问的链接通常与`:visited`伪类一起使用来区分已访问和未访问的链接
2	:visited	选择所有已访问的链接需要注意的是，出于隐私考虑，一些CSS属性（如背景色和边框色）可能无法应用于`:visited`伪类
3	:hover	选择鼠标指针悬停其上的元素常用于链接、按钮和可交互元素上，以提供视觉反馈
4	:avtive	选择被激活的元素对于链接和按钮来说，`:active`伪类通常在鼠标点击时触发，但在鼠标按钮释放之前
5	:focus	选择获得焦点的元素常用于表单输入元素（如文本框、单选按钮、复选框等）上，以指示当前哪个元素处于激活状态
6	:enabled :disabled	分别选择启用和禁用的表单元素（如输入框、按钮等）这对于提高表单的可用性和清晰度非常有用
7	:checked	选择被选中的`<input type="radio">`、`<input type="checkbox">`或`<option>`元素这允许你为选中状态提供自定义样式
8	:read-only :read-write	分别选择只读和可编辑的表单元素（如文本框）这些伪类可以帮助你区分不同状态的表单元素，并相应地调整它们的样式
9	:valid :invalid	分别选择通过验证和未通过验证的表单元素这些伪类对于实现表单验证反馈非常有用，可以直观地告诉用户哪些字段需要更正
10	:required :optional	分别选择被标记为必填和可选的表单元素这些伪类可以帮助你为不同类型的表单字段提供不同的样式或提示
使用这些UI元素伪类选择器时，你可以为不同的用户交互状态定义不同的样式规则，从而提高网站的可用性和用户体验。例如，你可以改变链接的颜色以指示它们是否已被访问，或者为表单输入框添加边框颜色以指示它们是否有效。