什么是CSS选择器？

CSS选择器用于在HTML文档中查找和选择元素，以便应用样式。它们定义了样式规则应用于哪些HTML元素。

CSS选择器有多种类型，每种类型都有其特定的用途和语法。

常见CSS选择器类型

• 元素选择器：选择所有指定类型的HTML元素。例如，p 选择所有段落。
• 类选择器：选择所有具有指定类名的元素。使用点号（.）表示。例如，.myClass 选择所有类名为 myClass 的元素。
• ID选择器：选择具有指定ID的元素。使用井号（#）表示。例如，#myId 选择ID为 myId 的元素。
• 属性选择器：选择具有指定属性的元素。例如，[type="text"] 选择所有类型为文本输入框的元素。
• 后代选择器：选择作为某元素后代的所有元素。例如，div p 选择所有在 div 内的 p 元素。
• 子选择器：选择作为某元素直接子元素的所有元素。例如，ul > li 选择所有直接作为 ul 子元素的 li 元素。

案例讲解：使用CSS选择器进行样式设置

<div class="highlight">这是一个高亮显示的div元素</div>

.highlight {
    background-color: yellow;
    font-weight: bold;
}

<div class="container">
    <p>这是一个段落，在container内</p>
    <span>这是一个span，在container内</span>
</div>

.container p {
    color: blue;
}
.container span {
    color: red;
}