关于CSS选择器

CSS选择器是用于选择HTML文档中要样式化的元素的模式。以下是一些常用的CSS选择器：

1. 基本选择器：

   • 通用选择器（Universal Selector）： *，匹配文档中的所有元素。
   • 元素选择器（Element Selector）： 按照元素的名称选择，如 p 选择所有段落元素。

2. ID选择器：

   • ID选择器（ID Selector）： #id，通过元素的唯一标识符选择元素，如 #header。

3. 类选择器：

   • 类选择器（Class Selector）： .class，通过元素的类名选择元素，如 .btn。
   • 多类选择器： .class1.class2，选择同时具有多个类名的元素。

4. 属性选择器：

   • 属性存在选择器： [attribute]，选择具有指定属性的元素，如 [disabled]。
   • 属性值相等选择器： [attribute=value]，选择具有指定属性值的元素，如 [type="text"]。

5. 组合选择器：

   • 并集选择器： selector1, selector2，选择满足任一选择器条件的元素。
   • 后代选择器： ancestor descendant，选择ancestor元素的所有后代descendant元素，中间用空格隔开。
   • 子元素选择器： parent > child，选择parent元素的所有直接子元素child。

6. 伪类选择器：

   • 链接伪类选择器： :link、:visited，分别选择未访问和已访问的链接。
   • hover伪类选择器： :hover，选择元素在被用户悬停时的状态。
   • active伪类选择器： :active，选择元素在被用户点击时的状态。
   • focus伪类选择器： :focus，选择元素获得焦点时的状态。

7. 伪元素选择器：

   • before伪元素选择器： ::before，在元素的内容前面插入生成的内容。
   • after伪元素选择器： ::after，在元素的内容后面插入生成的内容。

8. 结构性伪类选择器：

   • first-child伪类选择器： :first-child，选择元素是其父元素的第一个子元素。
   • last-child伪类选择器： :last-child，选择元素是其父元素的最后一个子元素。
   • nth-child伪类选择器： :nth-child(an+b)，选择满足指定表达式的元素，如 :nth-child(odd) 选择奇数位置的元素。

以上是一些常见的CSS选择器，它们可以单独或组合使用，以达到选择特定元素并应用样式的目的。