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元素