CSS 选择器 | guanghechen

tags

Javascript 踩坑记——继承和原型链Sep 05, 2021
🔖 #studynote#javascript#ecmascript
防抖和节流Sep 03, 2021
🔖 #coding#debounce#throttle
XSS 与 CSRF 的攻防Aug 19, 2021
🔖 #web#web security#csrf
自然对数底数 eAug 07, 2021
🔖 #math#函数#极限#自然对数
当你想来一把数独Aug 01, 2021
🔖 #game#sudoku
精确覆盖问题和 DLX 算法Jul 24, 2021
🔖 #算法#精确覆盖#DLX 算法
洗牌问题和 knuth-shuffle 算法Jul 22, 2021
🔖 #shuffle#knuth-shuffle#约瑟夫环
统计区间内的线段Jul 21, 2021
🔖 #quiz#扫描线#前缀和#树状数组#线段树
约瑟夫环问题Jul 16, 2021
🔖 #quiz#经典问题#约瑟夫环
剑指offer 解题报告Jul 15, 2021
🔖 #专题训练#解题报告
不修改数组找出重复的数字Jun 29, 2021
🔖 #quiz#分治#追击
背包九讲Jun 27, 2021
🔖 #acm#算法#动态规划#背包问题
React ReconciliationJun 26, 2021
🔖 #react#react reconciliation
扔鸡蛋问题Jun 20, 2021
🔖 #quiz#动态规划
端口管理Jun 20, 2021
🔖 #network#port#ssh#netstat
最长公共子序列（LCS）Jun 02, 2021
🔖 #最长公共子序列#LCS
最长上升子序列（LIS）Jun 02, 2021
🔖 #最长上升子序列#LIS
Dijkstra 算法May 29, 2021
🔖 #算法#最短路#单源最短路#dijkstra
函数的极限May 09, 2021
🔖 #math#函数#极限
ECMA 2020 新特性Apr 05, 2021
🔖 #javascript#ecmascript
ECMA 2021 新特性Apr 05, 2021
🔖 #javascript#ecmascript
在 excel 中启用正则表达式Mar 29, 2021
🔖 #excel#tools
CSS 选择器Nov 02, 2020
🔖 #web#frontend#css
Custom React HooksOct 29, 2020
🔖 #react#react hooks
组合游戏基础之 SG 函数和 SG 定理Sep 04, 2016
🔖 #组合数学#组合游戏#SG 定理
网络流 24 题Jul 30, 2016
🔖 #acm#算法#图论#网络流#二分图#解题报告#专题训练
网络流基础之最大权闭合图Jul 24, 2016
🔖 #算法#图论#网络流#最大权闭合图
2016 多校第 2 场Jul 22, 2016
🔖 #acm#训练赛#数据结构#解题报告
二分图Jul 17, 2016
🔖 #算法#图论#二分图#学习笔记
伸展树专题Jul 03, 2016
🔖 #acm#Splay#解题报告#专题训练
CCF 2015-09 最佳文章解题报告Jun 26, 2016
🔖 #acm#Aho-Corasick 自动机#矩阵快速幂#动态规划#解题报告
编译原理-语法制导翻译实现计算器Jun 23, 2016
🔖 #编译原理#语法制导翻译#计算机
编译原理-语法分析Jun 18, 2016
🔖 #编译原理#语法分析#计算机
百度之星 2016 解题报告Jun 03, 2016
🔖 #acm#递推#状态压缩#动态规划#字典树#解题报告
数论基础之原根May 16, 2016
🔖 #math#数论#原根
数论基础之欧拉函数May 10, 2016
🔖 #math#数论#既约剩余系#欧拉函数
数论基础之筛法May 06, 2016
🔖 #math#数论#素数#欧拉函数#线性筛
数论基础之模方程初步May 04, 2016
🔖 #math#数论#扩展欧几里得算法#中国剩余定理#Baby Step Gaint Step
HDU-5576 Expection of String 解题报告（原 2015-上海区域赛-E)Apr 24, 2016
🔖 #acm#动态规划#解题报告
树链剖分Apr 23, 2016
🔖 #acm#算法#树链剖分
51nod-1462 数据结构 -- 解题报告Apr 23, 2016
🔖 #acm#数据结构#树链剖分#线段树#解题报告
小球放盒模型Apr 22, 2016
🔖 #math#组合数学
最长回文子串 Manacher 算法Apr 18, 2016
🔖 #算法#字符串#回文串#manacher
POJ-1324 Holedox Moving 解题报告Apr 13, 2016
🔖 #acm#bfs#图论#状态压缩#解题报告
HDU-5574 Colorful Tree 解题报告（原 2015-上海区域赛-C）Apr 12, 2016
🔖 #acm#数据结构#树链剖分#线段树#解题报告
快速傅里叶变换和雷德算法Apr 10, 2016
🔖 #acm#大数乘法#fft#快速傅里叶变换
HDU-5306 Gorgeous Sequence 解题报告Apr 09, 2016
🔖 #acm#数据结构#线段树#解题报告

选择器优先级
¶

CSS 选择器类型的优先级： 内联样式 $>$ ID 选择器 $>$ 类选择器 $>$ 标签选择器
具体计算规则如下，其中 $(a, b, c, d)$ 将作为向量比较大小，即左侧的数值有绝对优先权
A specificity is determined by plugging numbers into $(a, b, c, d)$ :
- If the styles are applied via the style attribute, $a = 1$ ; otherwise, $a = 0$ .
- $b$ is equal to the number of ID selectors present.
- $c$ is equal to the number of class selectors, attribute selectors, and pseudo classes present.
- $d$ is equal to the number of type selectors and pseudo elements present.
以下选择符对优先级没有影响
- 通配选择符 (universal selector)： *
- 关系选择符 (combinators)： +, >, ~, , ||
- 否定伪类 (negation pseudo-class): :not() 但是在 not() 内部声明的选择器会影响优先级

栗子

Selector	Specificity
`div`	$(0, 0, 0, 1)$
`div span`	$(0, 0, 0, 2)$
`div > span ~ i`	$(0, 0, 0, 3)$
`div button[type="button"]`	$(0, 0, 1, 1)$
`div.container`	$(0, 0, 1, 1)$
`div .container.container`	$(0, 0, 2, 1)$
`.container.container`	$(0, 0, 2, 0)$
`.container.container div`	$(0, 0, 2, 1)$
`.container .container div`	$(0, 0, 2, 1)$
`#container`	$(0, 1, 0, 0)$
`#container a:hover`	$(0, 1, 1, 1)$

特殊规则
¶

!important: 此声明将覆盖任何其它声明
内联样式中使用 !important 无法被覆盖
属性直接的约束可能越过优先级规则，比如 max-width 强于 width，因此下面的样式中即便声明了 width: 500px !important;（React 的 style 属性不支持 important 声明），最终的效果也只是 200px，因为 max-width 拥有更强的约束：
const Div = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; max-width: 200px; height: 100px !important; width: 500px !important; background: palevioletred; color: white; ` function Element() { const divRef = React.useRef(null) const [size, setSize] = React.useState({ width: 0, height: 0 }) React.useEffect(() => { if (divRef.current == null) return const { clientWidth: width, clientHeight: height } = divRef.current setSize({ width, height }) }, []) return ( <Div ref={ divRef }> <h3>width: {size.width}px</h3> <h3>height: {size.height}px</h3> </Div> ) } render(<Element />)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const Div = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
max-width: 200px;
height: 100px !important;
width: 500px !important;
background: palevioletred;
color: white;
`

function Element() {
const divRef = React.useRef(null)
const [size, setSize] = React.useState({ width: 0, height: 0 })

React.useEffect(() => {
if (divRef.current == null) return
const { clientWidth: width, clientHeight: height } = divRef.current
setSize({ width, height })
}, [])

return (
<Div ref={ divRef }>
<h3>width: {size.width}px</h3>
<h3>height: {size.height}px</h3>
</Div>
)
}

render(<Element />)
width: 200px
height: 200px
类似的，width 和 min-width, height 和 max-height, height 和 min-height 也满足此类约束。

选择器优先级¶

特殊规则¶

width: 200px

height: 200px

Related¶

选择器优先级
¶

特殊规则
¶

Related
¶