Open mileOfSunshine opened 3 years ago
记录 battle 例子
CSS选择器的优先级关系:
内联 > ID选择器 > 类选择器 > 标签选择器
浏览器具体的优先级算法(from 《CSS REFACTORING》):
优先级值由 A
B
C
D
的值来决定,他们值的计算规则为:
1、如果存在内联样式,那么 A = 1
,否则 A = 0
2、B
的值等于 ID选择器(#id)
出现的次数
3、C
的值等于 类选择器(.class)
和 属性选择器(a[target])
和 伪类(::before、::after)
出现的总次数
4、D
的值等于 标签选择器(span、div)
和 伪元素(:active、:first-child)
出现的总次数
示例:
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
比较规则:从左往右依次进行比较,较大者胜出,如果相等,则继续往右移动一位进行比较。如果4位全部相等,则后面的覆盖前面的。
扩展:
所有伪元素:
::after
::before
::first-letter
::first-line
::selection
伪类:
:active
:first-child
。。。
重排:浏览器需要重新计算元素在视口内的几何属性。 重绘:根据节点样式和几何信息,将渲染树上的每个节点转换成屏幕上的实际像素。
1、最小化,如样式集中改变,设置新样式类名
2、批量操作DOM,如将元素属性存储于临时变量,利用 DocumentFragment
集中操作DOM
3、脱离文档流(fixed or absolute)
4、开启GPU加速,利用css属性 transform 、will-change 为元素创建GPU图层,独立于图层渲染
可利用 box-sizing (= content-box)(= border-box)属性可进行转换。
如果所有元素的flex-grow/shrink之和大于等于1,则所有子元素的尺寸会被调整到适应父元素的尺寸(在不考虑(max-/min-)width/height的前提下), 而如果所有元素flex-grow/shrink之和小于1,则只会grow/shrink所有元素flex-grow/shrink之和相对于1的比例。 grow时的每个元素的权重即为元素的flex-grow的值,shrink时的每个元素的权重则为元素flex-shrink乘以width后的值。公式:
所有子项收缩系数之和(>=1)
溢出宽度 = 父容器宽度 - ∑(子项宽度)
所有子项收缩系数之和(<1)
溢出宽度 = (父容器宽度 - ∑(子项宽度)) * (∑(子项收缩系数)) / 1
子项的收缩宽度 = 子项收缩比例 * 溢出宽度
子项的收缩比例 = (子项宽度 * 子项收缩系数) / ∑(子项宽度 * 子项收缩系数)
6 CSS Properties Nobody Is Talking About