CSS选择器，常见用途举例

1. 基础选择器

1.1. 元素选择器

选择特定类型的 HTML 元素。

p {
    color: blue;
}

应用于所有 <p> 元素，使其文字颜色变为蓝色。

1.2. 类选择器

选择具有特定类的元素。

.my-class {
    font-size: 16px;
}

应用于所有具有 my-class 类的元素，使其字体大小为 16px。

1.3. ID选择器

选择具有特定ID的元素。

#my-id {
    background-color: yellow;
}

应用于具有 my-id ID 的元素，使其背景颜色变为黄色。

2. 组合选择器

2.1. 后代选择器

选择某元素的所有后代元素。

div p {
    color: green;
}

应用于所有 <div> 内部的 <p> 元素，使其文字颜色变为绿色。

2.2. 子选择器

选择某元素的直接子元素。

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

应用于所有 <ul> 的直接子元素 <li>，移除其列表样式。

2.3. 相邻兄弟选择器

选择紧接在另一元素之后的兄弟元素。

h1 + p {    margin-top: 0;
}

应用于紧接在 <h1> 之后的第一个 <p> 元素，移除其上边距。

2.4. 通用兄弟选择器

选择某元素之后的所有兄弟元素。

h1 ~ p {
    color: red;
}

应用于 <h1> 之后的所有 <p> 元素，使其文字颜色变为红色。

3. 属性选择器

根据元素的属性及其值进行选择。

input[type="text"] {
    border: 1px solid #000;
}

应用于所有 type 属性为 text 的 <input> 元素，给它们添加边框。

4. 伪类选择器

4.1. 动态伪类

根据用户与元素的交互状态进行选择。

a:hover {
    color: orange;
}

应用于所有鼠标悬停的 <a> 元素，使其文字颜色变为橙色。

4.2. 结构性伪类

根据文档树中的元素位置进行选择。

li:first-child {
    font-weight: bold;
}

应用于所有列表中的第一个 <li> 元素，使其字体加粗。

5. 伪元素选择器

选择元素的一部分进行样式应用。

p::first-line {
    text-transform: uppercase;
}

应用于所有 <p> 元素的第一行文字，使其变为大写。

6. 组合和分组选择器

6.1. 组合选择器

结合多个选择器来精确选择元素。

div.content > p.highlight {
    background-color: lightblue;
}

应用于 <div> 内部直接子元素 <p>，且具有 highlight 类的元素，使其背景颜色变为淡蓝色。

6.2. 分组选择器

将多个选择器组合在一起，应用相同的样式。

h1, h2, h3 {
    margin-bottom: 20px;
}

应用于所有 <h1>、<h2> 和 <h3> 元素，设置其下边距为 20px。

7. 伪类选择器和伪元素选择器结合使用

a:hover::after {
    content: " (Link)";
    color: red;
}

应用于所有鼠标悬停的 <a> 元素，在其后添加 " (Link)" 文本，并设置其颜色为红色。

通过这些示例，您可以更好地理解和使用 CSS 选择器来控制网页元素的样式。希望这些信息对您有所帮助！