CSS常见选择器

CSS（层叠样式表）中包含了多种用于选择和定位HTML文档中元素的选择器，以便为这些元素应用样式。以下是CSS中常见的一些选择器及其详细解析：

1. 基础选择器

• 元素（标签）选择器：

  p {
    color: red;
  }
  

  这会选择所有

  标签，并将它们的文字颜色设置为红色。

• 类选择器：

  .my-class {
    background-color: yellow;
  }
  

  通过.加类名来选择具有相应class属性的任何元素。

• ID选择器：

  #unique-id {
    font-size: 16px;
  }
  

  通过#加ID名来选择具有唯一ID属性的特定元素。

• 通配符选择器：

  * {
    margin: 0;
    padding: 0;
  }
  

  通配符*可以匹配文档中的所有元素，通常用于全局样式初始化。

2. 复合选择器

• 后代选择器：

  div p {
    text-align: justify;
  }
  

  选择所有位于div元素内部的

  元素，不论嵌套层级多深。

• 子元素选择器：

  ul > li {
    list-style-type: none;
  }
  

  选择直接位于ul元素下的所有

• 元素，而非所有后代li。

• 相邻兄弟选择器（Adjacent sibling combinator）：

  h1 + p {
    margin-top: 0;
  }
  

  选择紧接在h1元素之后的第一个

  元素。

• 一般兄弟选择器（General sibling combinator）：

  h1 ~ p {
    color: green;
  }
  

  选择所有在h1元素之后的同级

  元素。

3. 属性选择器

• 精确匹配属性值：

  a[target="_blank"] {
    color: blue;
  }
  

  选择所有target属性值为"_blank"的链接。

• 以特定值开头或结尾：

  input[type^="text"] {
    width: 100%;
  }
  

  选择所有type属性值以“text”开头的元素。

• 包含特定值：

  [data-role] {
    border: 1px solid black;
  }
  

  选择所有具有data-role属性（不论值为何）的元素。

4. 伪类选择器

• 动态伪类：

  a:hover {
    text-decoration: underline;
  }
  

  当鼠标悬停在链接上时，为其添加下划线。

• 结构性伪类：

  li:first-child {
    font-weight: bold;
  }
  

  选择每个列表项中作为其父元素的第一个子元素的

• 。

5. 其他高级选择器

• 结构化伪类（如:nth-child()、:nth-of-type()等）：

  li:nth-child(odd) {
    background-color: lightgrey;
  }
  

  选择索引为奇数的列表项。

以上只是部分CSS选择器的简要介绍，实际应用中还有更多复杂组合和更细致的选择器可供使用，例如:not(), :focus-within, :has(), 等，在现代CSS规范中得到了扩展。理解并熟练运用这些选择器能够极大地提高CSS样式的灵活性和精准度。