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结构或类名选择元素时。

十四、UI元素伪类选择器

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

十五、欢迎交流指正

十六、参考链接

css选择器_百度百科