【CSS常见的选择器】介绍

CSS

CSS (Cascading Style Sheets)用于定义网页样式，包括字体、颜色、布局等，在CSS中，选择器用于指定哪些元素将被应用样式，以下是一些常见的CSS选择器：

1. 元素选择器（Type Selector）:

   • 直接通过元素名称来选择，如 p, div, h1 等。

2. 类选择器（Class Selector）:

   • 通过元素的class属性来选择，用一个点.来表示，如 .classname。

3. ID选择器（ID Selector）:

   • 通过元素的ID来选择，只能用于一个元素，用井号#来表示，如 #idname。

4. 属性选择器（Attribute Selector）:

   • 选择带有特定属性或属性值的元素，例如 [type="text"]。

5. 伪类选择器（Pseudo-class Selector）:

   • 用来选择在特定状态下的元素，如元素被悬停时或者被点击时，例如 :hover, :active。

6. 伪元素选择器（Pseudo-element Selector）:

   • 用于选择元素的某个部分，如元素的第一行或第一个字，例如 ::first-line, ::before。

7. 后代选择器（Descendant Selector）:

   • 选择所有嵌套在特定元素内的元素，用空格分隔，例如 div p。

8. 子元素选择器（Child Selector）:

   • 选择直接嵌套在特定元素内的元素，用大于号>表示，例如 ul > li。

9. 相邻兄弟选择器（Adjacent Sibling Selector）:

   • 选择紧跟在特定元素后的元素，且两者有相同父元素，用加号+表示，例如 h1 + p。

10. 通用兄弟选择器（General Sibling Selector）:

    • 选择所有和特定元素有共同父元素的兄弟元素，用波浪号~表示，例如 h1 ~ p。

11. 通配符选择器（Universal Selector）:

    • 使用一个星号*选择所有元素，例如 *。

12. 分组选择器（Grouping Selector）:

    • 通过逗号分隔，选择多个元素应用相同的样式，例如 div, p, h1。

每种选择器都有其特定的使用场景和优先级，它们可以单独使用，也可以组合使用以达到更具体的选择目的。理解并掌握这些选择器对于编写有效的CSS代码至关重要。