CSS：选择器

CSS（层叠样式表）是用于控制网页样式和布局的语言。在CSS中，选择器是用于选择页面上的HTML元素以应用样式的模式。CSS提供了多种类型的选择器，每种选择器都有其特定的用途和行为。以下是一些常见的CSS选择器及其用法的详细介绍：

1. 元素选择器（Type Selector）

元素选择器是最基本的选择器，它根据HTML元素的类型来选择元素。例如：

p {
    color: red;
}

这将选择所有的<p>元素，并将它们的文本颜色设置为红色。

2. 类选择器（Class Selector）

类选择器使用点（.）来选择具有特定class属性的元素。例如：

.highlight {
    background-color: yellow;
}

这将选择所有具有class="highlight"的元素，并给它们添加黄色背景。

3. ID选择器（ID Selector）

ID选择器使用井号（#）来选择具有特定id属性的元素。每个页面上ID应该是唯一的。例如：

#main-header {
    font-size: 24px;
}

这将选择id="main-header"的元素，并将其字体大小设置为24像素。

4. 属性选择器（Attribute Selector）

属性选择器允许你根据元素的属性及其值来选择元素。例如：

a[href^="https"] {
    color: green;
}

这会选择所有href属性以“https”开头的<a>元素，并将它们的文本颜色设置为绿色。

5. 后代选择器（Descendant Selector）

后代选择器允许你选择作为某个元素后代的元素。例如：

div p {
    font-family: Arial, sans-serif;
}

这会选择所有在<div>元素内部的<p>元素，并为它们设置字体。

6. 子元素选择器（Child Selector）

子元素选择器使用>符号来选择某个元素的直接子元素。例如：

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

这会选择所有直接在<ul>元素内的<li>元素，并为它们设置方块型的列表符号。

7. 兄弟选择器（Sibling Selector）

兄弟选择器允许你选择紧随另一个元素后的元素。有两种类型：相邻兄弟选择器（E + F）和通用兄弟选择器（E ~ F）。

h2 + p {
    margin-top: 0;
}

这会选择紧跟在<h2>元素后的<p>元素，并移除它们的上边距。

8. 伪类选择器（Pseudo-class Selector）

伪类选择器用于向特定元素的状态添加样式。例如：

a:hover {
    color: blue;
}

这会选择所有<a>元素的悬停状态，并在用户悬停时将它们的文本颜色设置为蓝色。

9. 伪元素选择器（Pseudo-element Selector）

伪元素选择器允许你为元素的特定部分添加样式，而不需要实际的HTML结构。例如：

p::first-line {
    font-weight: bold;
}

这会选择所有<p>元素的第一行，并将其加粗。

10. 组合选择器

你可以组合不同的选择器来创建更具体的选择条件。例如：

div.highlight > h2:first-child {
    color: purple;
}

这会选择所有在具有class="highlight"的<div>元素内，作为第一个子元素的<h2>元素，并为它们设置紫色文本。

11. 通配符选择器（Universal Selector）

通配符选择器（*）可以匹配任何元素。

* {
    box-sizing: border-box;
}

这将为页面上的所有元素设置box-sizing属性为border-box。

12. 伪类和伪元素的组合

伪类和伪元素可以与其他选择器结合使用，以创建更具体的样式规则。例如：

li:nth-child(odd) {
    background-color: #eee;
}

这会选择所有奇数编号的<li>元素，并为它们设置浅灰色背景。

13. CSS3新增的伪类和伪元素

CSS3引入了更多的伪类和伪元素，如：

• :nth-of-type()和:first-of-type等，用于更精确地选择元素。
• :not()伪类，用于排除某些元素。
• ::after和::before伪元素，用于在元素前后添加装饰性内容。

14. 选择器的优先级

CSS选择器有不同的优先级（也称为特异性）。ID选择器的优先级高于类选择器，类选择器的优先级高于元素选择器。内联样式（直接在HTML元素上设置的样式）具有最高的优先级。

了解这些选择器及其用法，可以帮助你更有效地控制网页的样式和布局。记住，合理地使用选择器可以提高样式表的可读性和维护性。