css选择器介绍

在 CSS（层叠样式表）中，选择器用于选择 HTML 文档中的元素，以便为这些元素应用样式。以下是对 CSS 中常见选择器的详细介绍：

1. 元素选择器

语法：直接使用 HTML 元素的名称作为选择器。
示例：

p {
    color: blue;
}

解释：上述代码会将 HTML 文档中所有的 <p> 元素的文本颜色设置为蓝色。

2. 类选择器

语法：以点号（.）开头，后面跟着类名。
示例：

<!DOCTYPE html>
<html>
<head>
    <style>
      .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">这段文本会有黄色背景。</p>
    <p>这段文本没有特殊背景。</p>
</body>
</html>

解释：类选择器会选中所有具有指定类名的元素。在这个例子中，所有添加了 highlight 类的元素都会有黄色背景。

3. ID 选择器

语法：以井号（#）开头，后面跟着 ID 名。
示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #unique {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="unique">这段文本的字体大小为 20px。</p>
</body>
</html>

解释：ID 选择器用于选中具有指定 ID 的元素。需要注意的是，在一个 HTML 文档中，每个 ID 应该是唯一的。

4. 属性选择器

语法：使用方括号（[]）来指定元素的属性及其值。
- 存在属性选择器：[attribute] 选择具有指定属性的元素。
- 属性值选择器：[attribute="value"] 选择具有指定属性且属性值等于指定值的元素。
- 部分属性值选择器：[attribute~="value"] 选择具有指定属性且属性值包含指定单词的元素；[attribute|="value"] 选择具有指定属性且属性值以指定值开头的元素；[attribute^="value"] 选择具有指定属性且属性值以指定值开头的元素；[attribute$="value"] 选择具有指定属性且属性值以指定值结尾的元素；[attribute*="value"] 选择具有指定属性且属性值包含指定子字符串的元素。
示例：

/* 选择所有具有 title 属性的元素 */
[title] {
    text-decoration: underline;
}

/* 选择所有 type 属性值为 "text" 的 input 元素 */
input[type="text"] {
    border: 1px solid gray;
}

5. 伪类选择器

语法：以冒号（:）开头，用于选择处于特定状态的元素。
- 链接伪类：:link 选择未访问的链接；:visited 选择已访问的链接。
- 动态伪类：:hover 选择鼠标悬停在上面的元素；:active 选择被激活（如鼠标点击时）的元素；:focus 选择获得焦点的元素。
- 结构伪类：:first-child 选择作为其父元素的第一个子元素的元素；:last-child 选择作为其父元素的最后一个子元素的元素；:nth-child(n) 选择作为其父元素的第 n 个子元素的元素。
示例：

/* 鼠标悬停在链接上时改变颜色 */
a:hover {
    color: red;
}

/* 选择每个 ul 元素中的第一个 li 元素 */
ul li:first-child {
    font-weight: bold;
}

6. 伪元素选择器

语法：以双冒号（::）开头，用于选择元素的特定部分。
- ::before 在元素内容之前插入内容。
- ::after 在元素内容之后插入内容。
- ::first-letter 选择元素的第一个字母。
- ::first-line 选择元素的第一行。
示例：

/* 在每个段落的开头插入一个引号 */
p::before {
    content: "“";
}

/* 在每个段落的结尾插入一个引号 */
p::after {
    content: "”";
}

7. 组合选择器

后代选择器：用空格分隔两个选择器，选择第一个选择器所匹配元素的后代元素。

div p {
    color: green;
}

解释：选择所有 <div> 元素内部的 <p> 元素，并将它们的文本颜色设置为绿色。

子选择器：用大于号（>）分隔两个选择器，选择第一个选择器所匹配元素的直接子元素。

div > p {
    font-style: italic;
}

解释：选择所有 <div> 元素的直接子元素 <p>，并将它们的字体样式设置为斜体。

相邻兄弟选择器：用加号（+）分隔两个选择器，选择紧跟在第一个选择器所匹配元素之后的具有相同父元素的第二个选择器所匹配的元素。

h2 + p {
    margin-top: 10px;
}

解释：选择紧跟在 <h2> 元素之后的 <p> 元素，并为其设置 10px 的顶部外边距。

通用兄弟选择器：用波浪号（~）分隔两个选择器，选择在第一个选择器所匹配元素之后的具有相同父元素的所有第二个选择器所匹配的元素。

h2 ~ p {
    background-color: lightgray;
}

解释：选择在 <h2> 元素之后的所有 <p> 元素（且它们具有相同的父元素），并将它们的背景颜色设置为浅灰色。

posted @ 2025-03-16 09:41 一只大学生阅读(36) 评论(0) 收藏举报

刷新页面返回顶部

Loading

一只大学生

大道至简