什么是CSS选择器？

CSS选择器用于选择HTML元素，并对其应用样式。它们是CSS中最基本也是最重要的部分之一。

基本选择器

• 元素选择器：选择所有指定标签的元素。例如，p { color: red; } 会将所有段落文本设置为红色。
• 类选择器：选择所有具有指定类名的元素。使用点（.）表示。例如，.myClass { font-size: 20px; } 会将所有类名为 myClass 的元素字体大小设置为20px。
• ID选择器：选择具有指定ID的元素。使用井号（#）表示。例如，#myId { background-color: yellow; } 会将ID为 myId 的元素背景颜色设置为黄色。

组合选择器

• 后代选择器：选择某个元素的所有后代元素。例如，div p { margin: 10px; } 会选择所有在 div 内的 p 元素，并为其设置10px的外边距。
• 子选择器：选择某个元素的直接子元素。使用 > 表示。例如，ul > li { list-style: none; } 会选择所有直接作为 ul 子元素的 li 元素，并去掉其列表样式。
• 相邻兄弟选择器：选择紧接在另一个元素后的兄弟元素。使用 + 表示。例如，h1 + p { font-weight: bold; } 会选择紧接在 h1 元素后的第一个 p 元素，并将其字体加粗。

属性选择器

属性选择器用于选择具有指定属性的元素。例如：

• [type="text"] { border: 1px solid #ccc; } 会选择所有类型为文本输入框的元素，并为其添加边框。
• [disabled] { opacity: 0.5; } 会选择所有禁用的元素，并将其透明度设置为0.5。

案例讲解

<div class="content">
    <h2>标题</h2>
    <p>这是一段文字。</p>
    <p class="special">这是一段特殊的文字。</p>
</div>

.content p {
    color: green;
}

.content .special {
    color: blue;
}