网络知识网站,wordpress建图片网站,新开服网页游戏一览表,折再返怎么 做网站主线程遍历得到的 DOM 树#xff0c;依次为树中的每个节点计算出它最终的样式#xff0c;称之为 Computed Style。
通过前面生成的DOM 树和 CSSOM 树#xff0c;遍历 DOM 树#xff0c;为每一个 DOM 节点#xff0c;计算它的所有 CSS 属性#xff0c;最后会得到一棵带有…主线程遍历得到的 DOM 树依次为树中的每个节点计算出它最终的样式称之为 Computed Style。
通过前面生成的DOM 树和 CSSOM 树遍历 DOM 树为每一个 DOM 节点计算它的所有 CSS 属性最后会得到一棵带有样式的 DOM 树–也叫“渲染树 Render Tree” 可在控制台查看样式计算 属性值的计算过程
1、确定声明值
声明值就是 “自己所书写的 CSS 样式浏览器内置的样式表” 相加得到全部的声明值并且将部分值进行转换
如color: red;转换为color: rgb(255, 0, 0);
font-size: 2em;转换为font-size: 14px;。
2、层叠冲突
在确定声明值时声明的样式规则发生了冲突解决冲突下面这三个步骤
一比较源的重要性
样式有三种来源
1. 浏览器默认样式用户代理样式浏览器会有一个基本的样式表来给任何网页设置默认样式 2. 网页设计者定义的样式页面作者样式即外联样式、内部样式、style行内样式等 3. 控制台调试样式用户样式浏览器的用户在开发者模式里使用自定义样式表定制使用体验
对应的重要性顺序依次为网页设计者定义的样式 用户样式 浏览器默认样式
二比较优先级–权重
如果在同一源中出现了样式声明冲突则比较其优先级。
权重的等级
!important权重最大会覆盖页面内任何位置定义的元素样式。 内联样式写在标签中的权重为1000 ID选择器权重为0100 类、伪类、属性选择器权重为0010 标签、伪元素选择器权重为0001 通配符、子选择器、相邻选择器等权重为0000
我手写了计算权重的方法
案例1
ul idnav classnavli classactive idbba href/a/li
/ulul#nav li.active a 权值为0,1,1,3ul li.active a 权值为0,0,1,3---一个伪类三个标签ul.nav li.active a 的权值为0,0,2,3
如是行内样式内联样式权值为1,0,0,0 某项 CSS 属性后面带 !important 时权值最大。
案例2
都是设置文字颜色应该以哪个为主
!DOCTYPE html
html langen
head style/* 权重 0,0,1,1 */.nav a {color: red;}/* 权重 0,0,1,0 */.blog {color: yellow;}/* 权重 0,0,2,0 */.nav .blog {color: blue;}/style
/head
bodydiv classnava href classblogjava/aa hrefpython/aa hrefcss/aa hrefruby/a/div
/body
/html
分析
00110010 以红色为主
00200011 以蓝色为主 案例3
!DOCTYPE html
html langen
headstylea{color: yellow;} /*权重0,0,0,1*/div a{color: green;} /*权重0,0,0,2*/.demo a{color: black;} /*权重0,0,1,1*/.demo input[typetext]{color: blue;} /*权重0,0,2,1*/.demo *[typetext]{color: grey;} /*权重0,0,2,0*/#d1 a{color: orange;} /*权重0,1,0,1*/div#d1 a{color: red;} /*权重0,1,0,2*//style
/head
bodya href第一/a div classdemoinput typetext value第二 /a href第三/a/divdiv idd1a href第四/a/div
/body
/html
分析
#d1 a和div#d1 a 设置相同的属性但01010102 以红色为主 三比较次序----重要如权重值相同“就近原则”
后声明的样式会覆盖先声明的样式。
p{/* 会被覆盖 */color: yellow;
}p{ color: green;
}3、使用继承
对于每一个 DOM 节点都会去计算它的所有 CSS 属性。
对于未声明的属性并不是直接使用默认值而是使用继承值。
divpjava/p
/div
div{color: red;
}这里p标签会继承来自div的color: red样式。
继承原则
就近原则谁近就继承谁的与权重无关。大部分字体相关的属性都是可继承的
4、使用默认值
如果最后仍不能确定属性值则使用浏览器默认值。
