在 CSS 中，选择器被用来选择我们想要样式化的 HTML 元素。以下是一些主要的选择器类型及其用途的简要说明：
-
元素选择器（类型选择器）：
- 直接按照 HTML 元素的名称来选择元素。
- 例如，
p { color: red; }会将所有<p>元素的文字颜色设置为红色。
-
类选择器：
- 使用 HTML 元素的 class 属性来选择元素。
- 例如，
.menu { font-size: 16px; }会应用到所有 class 包含menu的元素。
-
ID 选择器：
- 使用 HTML 元素的 ID 来选择一个特定的元素。
- 例如，
#header { background-color: blue; }会设置 ID 为header的元素的背景颜色为蓝色。
-
属性选择器：
- 根据元素的属性及属性值来选择元素。
- 例如，
input[type="text"] { border: 1px solid black; }会选择所有类型为文本的输入框，并为它们设置边框。
-
伪类选择器：
- 用来选择处于特定状态的元素，如被鼠标悬停的元素。
- 例如，
a:hover { color: green; }会在鼠标悬停在链接上时，将链接的颜色改为绿色。
-
伪元素选择器：
- 用来选择元素的特定部分，如元素的第一行或第一个字母。
- 例如，
p::first-letter { font-size: 200%; }会将每个段落的第一个字母的字体大小设置为原来的两倍。
-
后代选择器：
- 选择一个元素内部的后代元素。
- 例如，
div p { color: blue; }会将<div>元素内部所有的<p>元素的文字颜色设置为蓝色。
-
子选择器：
- 仅选择直接子元素。
- 例如，
ul > li { list-style-type: none; }会将直接位于<ul>下的<li>元素的列表样式去除。
-
相邻兄弟选择器：
- 选择紧接在另一个元素后的元素，且二者有相同父元素。
- 例如，
h1 + p { margin-top: 0; }会将紧跟在<h1>元素后的第一个<p>元素的上边距设置为0。
-
通用兄弟选择器：
- 选择所有在另一元素之后的兄弟元素，且这些兄弟元素有共同的父元素。
- 例如，
h1 ~ p { color: red; }会将所有在<h1>之后的<p>元素的文字颜色设置为红色。
这些选择器可以单独使用，也可以组合使用来实现复杂的选择逻辑，从而精确控制 CSS 样式的应用。
2024年8月14日 20:16 回复