css中的选择器

` 元素。

div p {
margin: 10px;
}

5、 子元素选择器：选择某个元素的直接子元素。

实例：`ul > li` 选择所有直接在 `

• ` 元素内的 `

• ` 元素。

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

6、 属性选择器：根据元素的属性及其值选择元素。

实例：`a[href^="https"]` 选择所有 `href` 属性以 "https" 开始的 `` 元素。

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

7、 伪类选择器：根据元素的特定状态选择元素。

实例：`a:hover` 选择鼠标悬停时的 `` 元素。

a:hover {
text-decoration: underline;
}

8、 伪元素选择器：选择元素的特定部分。

实例：`p::first-line` 选择 `

` 元素的第一行。

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

9、 兄弟选择器：

实例：`h2 + p` 选择紧跟在 `h2` 元素后的首个 `

` 元素。

h2 + p {
margin-top: 0;
}

10、 相邻兄弟选择器：选择紧随某个元素后的同类型兄弟元素。

实例：`h2 ~ p` 选择所有跟在 `h2` 元素后的 `

` 元素。

h2 ~ p {
margin-left: 20px;
}

11、 否定伪类：选择不匹配特定选择器的元素。

实例：`p:not(.highlight)` 选择所有没有 `class="highlight"` 的 `

` 元素。

p:not(.highlight) {
color: black;
}

这些选择器可以单独使用，也可以组合使用以创建更具体的选择条件。在实际开发中，类选择器和元素选择器是最常用的，因为它们提供了足够的灵活性来应用于各种设计需求，同时保持了代码的可维护性。