CSS选择器 - 认识选择器

GinoWi
30 阅读8分钟

CSS选择器 - 认识选择器

选择器就是用于查找或选取需要设置CSS样式的HTML标签。

标签选择器

  • 作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。
  • 格式：
标签名称{
  属性名称: 属性名称值;
}

  • 注意点：

    1. 标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签。
    2. 标签选择器无论标签嵌套多深都能选中。
    3. 只要是HTML中的标签就可以作为标签选择器。

id选择器

  • 作用：根据指定的id名称找到对应的标签，然后设置属性。
  • 格式：
#id名称{
  属性名称: 属性值;
}

  • 注意点：

    • 每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id。
    • 在同一个界HTML页面中id的名称是不可以重复的。
    • 在编写id选择器的时候一定要在id名称前面加上#。
    • id名称是有一定的规范的：（1）id名称只能由字母/数字、下划线组成；（2）id名称不能以数字开头；（3）id名称不能是HTML标签的名称。
    • 在开发过程中，一般情况下如果仅仅是为了设置样式，我们不会专门使用id选择器，因为id属性一般是留给js使用的。

类选择器

  • 作用：根据指定的类名称找到对应的标签，然后设置属性。
  • 格式：
.类名{
  属性名称: 属性值;
}

  • 注意点：

    • 每个HTML标签都一个属性叫做class，也就是说每个标签都可以设置class。
    • 在同一个HTML界面中class的名称是可以重复的。
    • 在编写class选择器的时候一定要在class名称前面加上.。
    • 类名的命名规范和id的命名规范一样。
    • 类名就是专门用来给某个特定的标签设置样式的。
    • 在HTML中每个HTML标签可以同时绑定多个类名，eg：<标签名称 class=“类名1 类名2 ……“>；错误的写法：<p class="1" class="2"></p>

补充内容：

  1. id和class的区别？

    • id相当于人的身份证，不能重复；而class相当于人的名称不能重复。
    • 一个HTML标签只能绑定一个id名称，而一个HTML标签可以绑定多个class名称。

  2. id选择器和class选择器的区别？

    • id选择器是以#开头，而class选择器以.开头。

  3. 在开发中到底选择id选择器还是class选择器？

    • id一般情况下是给js使用的，所以除非特殊情况，否则不要用id选择器去设置样式。

后代选择器

  • 作用：找到指定标签的所有后代标签设置属性。（组合器）
  • 格式：
/*先找到选择器1所选中的标签，然后再在这个标签下面去查找所有选择器2所选中的标签，然后再设置属性。*/
选择器1 选择器2{
    属性: 值;
}

  • 注意点：

    • 后代选择器必须用空格隔开。
    • 后代不仅仅是子元素，也包括孙子元素或者重孙子元素，只要最终是放到指定标签中的都是后代。
    • 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器（id选择器、类选择器）。
    • 后代选择器可以无限延伸，无限向下寻找。

子元素选择器

  • 作用：找到指定标签中所有直接子元素，然后设置属性。
  • 格式：
/*先通过选择器1找到选中的标签，然后在这个标签中查找所有通过选择器2选中的直接子元素。*/
选择器1 > 选择器2{
  属性: 值;
}
  • 注意点：
  1. 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
  2. 子元素选择器之间只能由大于号链接，并且不能加空格
  3. 子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器。
  4. 子元素选择器可以通过>一直延续下去。

补充内容：

后代选择器和子元素选择器之间的区别？

  • 后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。
  • 后代选择器会选中指定标签中所有的特定后代标签，也就是会选中儿子、孙子……，只要是被放到指定标签中的特定标签都会被选中。
  • 子元素选择器只会选中指定标签中所有特定的直接子元素，也就是只会选中特定的儿子标签。

后代选择器和子元素选择器的共同点？

  • 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器。
  • 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去。

在后续开发中如何使用？

  • 如果想选中指定标签中所有特定标签，那么就使用后代选择器
  • 如果只想选中指定标签中特定的儿子标签，那么选择子元素选择器

交集选择器

  • 作用：给所有选择器选中的标签中，共同包含的那部分标签设置属性。
  • 格式：
选择器1选择器2{
  属性: 值;
}

  • 注意点：

    • 选择器和选择器之间没有任何连接符号。
    • 选择器可以使用标签名称/id名称/class名称。

并集选择器

  • 作用：给我们所有选择器选中的标签设置属性。
  • 格式：
选择器1, 选择器2{
  属性: 值;
}

  • 注意点：

    • 并集选择器必须使用,来连接。
    • 选择器可以使用标签名称/id名称/class名称。

兄弟选择器

兄弟就是同级关系。

  1. 相邻兄弟选择器（CSS2）

    • 作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性。

    • 格式：

      选择器1 + 选择器2{
  属性: 值;
}

    • 注意点：

      • 相邻兄弟选择器必须通过加号连接。
      • 相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签。

  2. 通用兄弟选择器（css3）

    • 作用：给指定选择器后面所有选择器选中的所有标签设置属性。

    • 格式：

      选择器1 ~ 选择器2{
  属性: 值;
}

    • 注意点：

      • 通用兄弟选择器必须用波浪线来连接。
      • 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中。

序选择器

CSS3新增选择器中最具代表性的就是序选择器。

  • 格式：
标签名称序选择器{
  属性: 值;
}

  1. 同级别中的第几个

    • :first-child：选中同级别中的第一个标签

    • :last-child：选择同级别中最后一个标签

    • :nth-child(n)：选择同级别中第n个标签

    • :nth-last-child(n)：选择同级别中倒数第n个标签

    • 注意点：

      • 排序时不会区分类型。

  2. 同类型中的第几个

    • :first-of-type：选中同级别中同类型的第一个标签
    • :last-of-type：选中同级别中同类型的最后一个标签
    • :nth-of-type(n)： 选中同级别中同类型的第n个标签
    • :nth-last-of-type(n)：选择同级别中同类型的倒数第n个标签

  3. 特殊：

    • :only-child：选中父元素中唯一的元素
    • :only-of-type：选中父元素中唯一类型的元素
    • :nth-child(odd)：选中同级别中的奇数元素
    • :nth-child(even)：选中同级别中的偶数元素
    • :nth-of-type(odd)： 选中同级别中同类型的奇数元素
    • :nth-of-type(even)：选中同级别中同类型的偶数元素。
    • :nth-child(xn+y)： x和y时用户自定义的，而n是一个计数器，从0开始统计。

属性选择器

  • 作用：根据指定的属性名称找到对应的标签，然后设置属性

  • 格式：

    标签名称[attribute]{
    属性: 值;
}

  • 不同类型属性选择器：

    • 找到有指定属性，并切指定属性等于value的标签：

      标签名称[attribute=value]{
    属性: 值;
}

    • 选取属性取值是以value开头的：

      /*CSS2*/
标签名称[attribute|=value]{
    属性: 值;
}
/*CSS3*/
标签名称[attribute^=value]{
    属性: 值;
}

      • 区别：

        • CSS2开头只能找到value开头，并且value是用-与其他内容隔开的。
        • CSS3中的只要是以value开头的都可以找到，无论有没有被-隔开。

    • 属性的取值是以value结尾的：

      /*CSS3*/
标签名称[attribute$=value]{
    属性: 值;
}

    • 属性的取值是否包含某个特定的value：

      /*CSS2*/
标签名称[attribute~=value]{
    属性: 值;
}
/*CSS3*/
标签名称[attribute*=value]{
    属性: 值;
}

      • 区别：

        • CSS2的只能找到value是独立的单词，value是被空格隔开的。
        • CSS3中只要包含value就可以被找到。

  • 最常见的场景：用于区分input属性。

通配符选择器

  • 作用：给当前界面上所有标签设置属性。
  • 格式：
*{
  属性: 值;
}

  • 注意点：

    • 由于通配符选择器是设置界面上所有标签的属性，所以在设置之前会遍历所有标签，如果当前界面上的标签比较多，性能就会比较差，所以一般开发过程中不会使用。

参考链接：

W3School官方文档：www.w3school.com.cn

avatar
文章
阅读
粉丝