<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="1020-02css.css" />
</head>
<body>
<!-- 权重标例 -->
<style>
/ ! 选择器权重 /
/ ? CSS 用 3个正整数，来表示选择器权重 /
/ 权重规则 /
/
1.实体标记： id, class, tag
2.排序顺序： id, class, tag
3.记数方式： 选择器中的实体标记数量
/
h1 {
color: red;
}
/ ! 1. 权重的表示方法 /
/ ? (0 , 0 , 1) :
?(id, class, tag) 语法
/
/ ! (0, 1, 1)= id=>0,class=>1,tag=>1
? id = null = 0
? class = .title = 1
? tag = h1 =1
/
h1.title {
color: red;
}
/ !反推算权重
? id = #active = 1
? class = .title = 1
? tag = h1 =1
! 权重得出 (1, 1, 1)= id=>1,class=>1,tag=>1
/
h1#active.title {
color: red;
}
/ !反推算权重
? id = #active = 1
? class = .top, .title = 2
? tag = header, h1, div ==3
! 权重得出 (1, 2, 3)= id=>1,class=>2,tag=>3
/
header.top h1.title div#active {
color: blue;
}
/ ! 2 权重的优先级 /
/ ? (0,0,1), (0,0,2)：哪个权重大？
! 下例：
/
h1 {
/ (0,0,1) /
color: red;
}
/ 将h1改为蓝色
根据CSS 规则 层叠样式，后面的样式，覆盖前面的样式
/
/ h1 {color: blue;} (0,0,1) ，只要将权重提升到大于(0,0,1)就可了
(0,0,1) 提升到(0,0,2) 就可以了
将 h1 {color: blue;} 改
body h1 {color: blue;}
选择器body h1 就不再依赖位置了
这样写的好处是：
1.摆脱了对选择器位置的限制
2.不需要修改 html 源代码
/
body h1 {
/ (0,0,1) /
color: blue;
}
/ ! 3 权重注意事项，尽量不要在html 中使用id属性
? id 权重过大，位于权重项端
? id 会导致选择器换去弹性/弹性不足，不利于调试或复用
/
/ ! 4. 权重的经典应用场景： class 动态调整样式
/
.col-md-6 {
height: 2em;
border: thin solid;
color: blue;
}
/ 如果要修改这个样式
? 依赖dom结构的规则变更方案不好
! 修改 html.class 为他添加自定义类
/
.col-md-6.bgc {
height: 2em;
border: thin solid;
background-color: greenyellow;
}
</style>
<div class="col-md-6 bgc">Header</div>
<!-- 伪类选择器，结构伪类 -->
<style>
/ ?结构伪类：用来匹配子元素，给个查询起点 /
/ ?起点： ul.list /
.list > li.first {
background-color: aquamarine;
}
/ 用伪类来获取和1个 /
.list > li:nth-of-type(1) {
background-color: aquamarine;
}
.list > li:nth-of-type(3) {
background-color: #1d5746;
}
/ ! 快速获取第1个和最后一个：语法糖
.list > li:first-of-type{}
/
.list > li:first-of-type {
/ 获取第1个 /
background-color: blueviolet;
}
.list > li:last-of-type {
/ 获取最后1个 /
background-color: blueviolet;
}
/ ! 只获取前3个
! ：nth-of-type(an +b)
1. 0:系数 [0, 1, 2,3…]
1. n:参数 [0, 1, 2,3…]
1. b:偏移量 ，从0开始
/
/ ! 匹配元素的二种场景，
? 1，匹配1个，
? 2 匹配1组
/
/ 匹配第1个
a=0
.list>li:nth-of-type(0n+1){}/
.list > li:nth-of-type(0n + 1) {
/ 匹配第1个 /
background-color: #991662;
}
.list > li:nth-of-type(0n + 3) {
/ 匹配第3个 /
background-color: #991662;
}
.list > li:nth-of-type(1n + 0) {
/ 全选 /
background-color: #349916;
}
.list > li:nth-of-type(n + 3) {
/ 从第3个开始全选 /
background-color: #676d65;
}
.list > li:nth-of-type(-n + 3) {
/ 选前3个 /
background-color: #191f17;
color: #991662;
}
</style>
<!-- 伪类：伪（假，仿），类（class级）
伪类类型：
? 1.结构伪类：根据元素的位置来匹配
? 2.状态伪类：根据元素状态来匹配
-->
<ul class="list">
<li class="li">item1</li>
<li class="li">item2</li>
<li class="li">item3</li>
<li class="li">item4</li>
<li class="li">item5</li>
<li class="li">item6</li>
<li class="li">item7</li>
<li class="li">item8</li>
</ul>
</body>
</html>
