css

选择器

1. 元素选择器：选择指定元素的所有实例。例如，div选择器选择所有<div>元素。

div {
  /* 样式规则 */
}

2. 类选择器：选择具有指定类名的元素。类名以.开头。例如，.container选择器选择具有class="container"属性的元素。

.container {
  /* 样式规则 */
}

3. ID选择器：选择具有指定ID的元素。ID以#开头。例如，#header选择器选择具有id="header"属性的元素。

#header {
  /* 样式规则 */
}

4. 后代选择器：选择指定元素内的后代元素。使用空格表示嵌套关系。例如，ul li选择器选择所有<ul>元素内的<li>元素。

ul li {
  /* 样式规则 */
}

5. 子元素选择器：选择指定元素的直接子元素。使用>表示直接子元素关系。例如，.container > p选择器选择.container元素下的直接子级<p>元素。

.container > p {
  /* 样式规则 */
}

6. 相邻兄弟选择器：选择指定元素后面相邻的兄弟元素。使用+表示相邻兄弟元素关系。例如，.box + .box选择器选择.box元素后面相邻的具有相同类名的.box元素。

.box + .box {
  /* 样式规则 */
}

7. 通用兄弟选择器：选择指定元素后面的所有兄弟元素。使用~表示通用兄弟元素关系。例如，.box ~ .box选择器选择.box元素后面所有具有相同类名的.box元素。

.box ~ .box {
  /* 样式规则 */
}

这些是一些常见的CSS选择器及其用法。选择器的组合和使用可以根据具体需求进行灵活组织和调整。注意在编写CSS样式时，选择器的优先级和特定的HTML结构都需要考虑。