Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020.10.20第六课：css选择器权重及结构性伪类选择器的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7523
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2020.10.20第六课：css选择器权重及结构性伪类选择器的学习
启动未来
Original
725 people have browsed it

2022.10.21 选择器权重及结构性伪类选择器

一、上下文选择器

1、笔记

CSS中的上下文选择器常用的，主要有4种

  • 父子选择器：用>表示
  • 后代选择器：用空格表示
  • 兄弟选择器：用+号表示
  • 所有同级选择器：用~*表示

二、选择器权重

1、笔记

（1）在CSS中用3个非负整数表示选择器的区中，格式为(x,y,z)，其中x,y,z三个数的取值为0或者正整数；
（2）权重规则：

  • 实体标记：id,class,tag
  • 排列顺序：id,class,tag
  • 计数方式：选择器中的实体标记数量
  • x,y,z的数值分别等于选择器中实体标记id,class,tag的数量

2、举例说明

例1：下面的选择器h1,其权重为（0,0,1）：

  1.     <style>
  2.         h1 {
  3.             color:red;
  4.         }
  5.     </style>
  • 分析：上述选择器没有id的数量为0，class的数量为0,只有一个标签选择器，即h1,所以，其权重为（0,1,1）

例2：下面的选择器的权重是多少呢？

  1.     <sytle>
  2.         header.top h1.title div#active {
  3.     color:red;
  4. }
  5.     </sytle>
  • 分析：上述选择器中id的数量为1，即#active;class的数量为2，即.top和.title；tag的数量为3,即header,h1,div。那么它的权重应该为(1,2,3)

二、选择器的优先级

笔记，根据css的定义：层叠样式表，即一层一层往上覆盖的意思，那么选择器的优先级可分为如下几种情况

（1）对于同一位置的css样式，位置在后的CSS样式优先级高于位置靠前的CSS的优先级，例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>测试css的优先级</title>
  8.     <style>
  9.         h1 {
  10.             font-size:x-large;
  11.         }
  12.         /* 下面的优先级高于上面的 */
  13.         h1 {
  14.             font-size:x-small;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <!-- 1.只能识别1个style，且只能识别和渲染第一个style的内容 -->
  20.     <h1  style="color:red;" style="color:blue">php中文网</h1>
  22.     <!-- 2.最后写的属性优先级高于之前写的属性 -->
  23.     <!-- 即最后写的color属性，将覆盖第一个color属性，并最终被渲染出来，也就是同一位置，最后写的要覆盖之前写的属性 -->
  24.     <h1  style="color:red;color:blue;" >php中文网</h1>
  26. </body>
  27. </html>

(2) 根据CSS样式在渲染hmtl时候出现的位置，可以将CSS分为

  • 内嵌样式表：也叫行内样式表，写在元素的起始标签属性style=中的样式；
  • 内联样式表：写在html文档中的<style></style>标签中的css样式，通常位于<header></header>标签中；
  • 外部样式表：需要用<link rel="sylesheet" href="css文件的url">引入的文件
    优先级的顺序为：内嵌 > 内联 > 外部

(3)第三种判断方式：根据选择器的权重来判断。由于根据DOM模型来区分优先级有时候比较麻烦，而且不利于后期维护。所以我们也可以采用为新css样式的选择器提权，即增加权重的形式来达到浏览器优先渲染的目的。

  • 那么提权的方式可以增加id，增加class，增加tag，我们应该采取哪一种呢。答案是class.因为id选择器由于其唯一性，权重过大，不利于弹性维护。同样的增加tag标签提权的方式，容易降低css代码的复用率，也不是最佳的途径。
  • 最佳的途径就是增加class属性的办法。
    例：
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>选择器的权重（重点)</title>
    8.   <sytle>
    9.       .col-md-6 {
    10.       color:red;
    11.       }
    12.   </sytle>
    13. </head>
    14. <body>
    15.   <!-- <h1>hello world</h1> -->
    16.   <div class="col-md-6 ">header</div>
    17. </body>
    18. </html>

  • 分析：我们可以通过为div标签增加class属性,从而在制作div盒子CSS选择器的时候，通过链式语法，增加div盒子的css的权重。如，上例修改为：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>选择器的权重（重点)</title>
    8.   <sytle>
    9.       .col-md-6.omg {
    10.       color:blue;
    11.       }
    12.       .col-md-6 {
    13.       color:red;
    14.       }
    16.   </sytle>
    17. </head>
    18. <body>
    19.   <div class="col-md-6 omg ">header</div>
    20. </body>
    21. </html>
  • 分析，以上代码，虽然.col-md-6 {color:red;}的位置要更加往后，但是其选择器的优先级，低于.col-md-6.omg{color:blue;}，所以div盒子内容的字体最终呈现为蓝色
  • 总结，为元素增加class属性，从而增加css选择器权重的方式，是目前主流的做法。在大量的实战案例中，有着广泛的应用，应该牢记。

    三、结构性伪类选择器

    1、笔记

    （1）css中的伪类选择器主要有两种
  • 结构性伪类：即根据元素的位置来获取和匹配元素的选择器
  • 状态性伪类：即根据元素的状态来获取和匹配元素的选择器，例如失去焦点、鼠标悬停等。
    (2) 所有的子元素获取必须首先设置查询起点
    (3) 获取元素可以用class的链式语法，例如.list > .li.first{backgroun-color:lightgreen};
    (4) 但是通过伪类更方便，结构性伪类中常用的语法是nth-of-type(an + x)的形式，语法为ele.nth-of-type(an+x),其中
  • a,系数，取值范围为(0,1,2,3….) ；
  • n,参数，取值范围为（0,1,2,3…）；
  • x,参数，偏移量，取值范围为（0,1,2,3…）；
  • 规则：索引an+b最终计算的结果必须是合法有效的，范围为1到最后一个元素的序号。

    2、常用语法总结

  • ele:nth-of-type(x)——获取第x个ele元素
  • ele:nth-last-of-type(x)——获取倒数第X个ele元素
  • ele:first-of-type——语法糖：获取第一个元素
  • ele:last-of-type——语法糖：获取最后一个元素
  • ele:nth-of-type(n+x)——获取第x及之后的所有元素
  • ele:nth-of-type(-n+x)——正向获取正数前x个元素
  • ele:nth-last-of-type(-n+x)——反向获取倒数前X个元素
  • ele:nth-of-type(2n+1)或ele:nth-of-type(even)——获取第奇数个元素
  • ele:nth-of-type(2n)或ele:nth-of-type(even)——获取第偶数个元素
  • ele:nth-of-type(x)——获取所有的li元素
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总结的很好，条理清晰，看得出很认真，只是，下次可以再https://www.php.cn/member/courses/work.html中提交作业
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post