CSS选择器

CSS选择器是用于在HTML文档中定位并应用样式的强大工具。下面是一些常见的CSS选择器示例及其说明，以帮助你更好地理解它们的工作原理：

1. 元素选择器

p {
  color: red;
}

说明：这个选择器会选择页面上所有的<p>元素，并将它们的文本颜色设置为红色。

2. 类选择器

.highlight {
  background-color: yellow;
}

说明：这个选择器会选择所有带有class="highlight"属性的HTML元素，并将它们的背景色设置为黄色。

3. ID选择器

#unique-element {
  font-size: 20px;
}

说明：这个选择器会选择ID为unique-element的HTML元素，并将其字体大小设置为20像素。注意，每个ID在页面中应该是唯一的。

4. 属性选择器

input[type="text"] {
  border: 1px solid black;
}

说明：这个选择器会选择所有<input>元素中type属性值为text的元素，并为它们添加1像素的黑色边框。

5. 相邻兄弟选择器（A+B）

div + p {
  color: orange;
}

说明：这个选择器会选择紧接在<div>元素后的<p>元素，并将它们的文本颜色设置为橙色。

6. 通用兄弟选择器（A~B）

div ~ p {
  color: orange;
}

说明：这个选择器会选择所有在<div>元素之后的<p>兄弟元素（不论它们之间是否有其他元素），并将它们的文本颜色设置为橙色。

7. 组合选择器

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

说明：这个选择器会选择所有的<h1>、<h2>和<h3>元素，并将它们的字体设置为Arial或其他无衬线字体。
这些选择器可以单独使用，也可以组合使用，以创建更具体、更精确的选择规则。通过灵活使用这些选择器，你可以精确地控制页面上的样式应用。