CSS 常见选择器

CSS 常见选择器

CSS（层叠样式表）选择器是用来指定页面上的哪些元素需要被样式化的一种方式。以下是一些常见的CSS选择器及其用途：

1. 元素选择器：直接使用HTML元素的名称来选择该元素。

   p { color: blue; } /* 选择所有的<p>（段落）元素 */
   

2. 类选择器：使用.（点）后跟类名来选择具有特定类的元素。

   .my-class { background-color: yellow; } /* 选择所有class为"my-class"的元素 */
   

3. ID选择器：使用#后跟ID名来选择具有特定ID的元素。

   #my-id { font-size: 20px; } /* 选择ID为"my-id"的元素 */
   

4. 后代选择器：选择特定元素内部的后代元素。

   div p { color: green; } /* 选择所有在<div>元素内的<p>元素 */
   

5. 子选择器：选择直接作为某个元素子元素的元素。

   div > p { color: red; } /* 选择所有直接作为<div>元素子元素的<p>元素 */
   

6. 相邻兄弟选择器：选择紧接在另一个元素后的兄弟元素。

   h2 + p { font-weight: bold; } /* 选择紧跟在<h2>元素后的<p>元素 */
   

7. 通用兄弟选择器：选择某个元素之后的所有兄弟元素。

   h2 ~ p { color: orange; } /* 选择所有在<h2>元素之后的所有<p>元素 */
   

8. 属性选择器：选择具有特定属性的元素。

   [href] { text-decoration: underline; } /* 选择所有具有href属性的元素 */
   

9. 伪类选择器：选择元素的特定状态。

   a:hover { color: purple; } /* 选择鼠标悬停在<a>元素上时的状态 */
   

10. 伪元素选择器：选择元素的特定部分。

    p::first-line { color: red; } /* 选择每个<p>元素的第一行 */
    

11. 组合器：可以将上述选择器组合使用，以创建更复杂的选择模式。

    #header nav ul li a { color: white; } /* 组合选择器，选择特定结构的<a>元素 */
    

这些选择器可以单独使用，也可以组合使用来创建复杂的样式规则。了解这些基础选择器是学习CSS布局和样式设计的重要一步。