【CSS常见的选择器】介绍

CSS常见的选择器

• CSS

  CSS

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

  
  （图片来源网络，侵删）

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

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

     • 类选择器（Class Selector）:

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

       • ID选择器（ID Selector）:

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

         • 属性选择器（Attribute Selector）:

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

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

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

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

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

               • 后代选择器（Descendant Selector）:

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

                 • 子元素选择器（Child Selector）:

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

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

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

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

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

                       • 通配符选择器（Universal Selector）:

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

                         • 分组选择器（Grouping Selector）:

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

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