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）：

    <style>
        h1 {
            color:red;
        }
    </style>

分析：上述选择器没有id的数量为0，class的数量为0,只有一个标签选择器，即h1,所以，其权重为（0,1,1）

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

    <sytle>
        header.top h1.title div#active {
    color:red;
}
    </sytle>

分析：上述选择器中id的数量为1，即#active;class的数量为2，即.top和.title；tag的数量为3,即header,h1,div。那么它的权重应该为(1,2,3)

二、选择器的优先级

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试css的优先级</title>
    <style>
        h1 {
            font-size:x-large;
        }
        /* 下面的优先级高于上面的 */
        h1 {
            font-size:x-small;
        }
    </style>
</head>
<body>
    <!-- 1.只能识别1个style，且只能识别和渲染第一个style的内容 -->
    <h1  style="color:red;" style="color:blue">php中文网</h1>
    <!-- 2.最后写的属性优先级高于之前写的属性 -->
    <!-- 即最后写的color属性，将覆盖第一个color属性，并最终被渲染出来，也就是同一位置，最后写的要覆盖之前写的属性 -->
    <h1  style="color:red;color:blue;" >php中文网</h1>
</body>
</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属性的办法。
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器的权重（重点)</title>
  <sytle>
      .col-md-6 {
      color:red;
      }
  </sytle>
</head>
<body>
  <!-- <h1>hello world</h1> -->
  <div class="col-md-6 ">header</div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器的权重（重点)</title>
  <sytle>
      .col-md-6.omg {
      color:blue;
      }
      .col-md-6 {
      color:red;
      }
  </sytle>
</head>
<body>
  <div class="col-md-6 omg ">header</div>
</body>
</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元素