css - 这样写样式浏览器会选取 DOM 元素两次吗?
问题描述
.dom0, .dom1 {
text-align: center;
}
.dom0 {
color: red;
font-size: 12px;
}
.dom1 {
color: blue;
font-size: 14px;
}
如果少量公用的样式 是不是分别写比较好 虽然这样会造成代码的重复
.dom0 {
color: red;
font-size: 12px;
text-align: center;
}
.dom1 {
color: blue;
font-size: 14px;
text-align: center;
}
答主是想问两者在性能上的区别吧?
其实两种方式都可以,CSS不是JS,不是说分开写就会去选择DOM两次,CSS更像是这样的过程:
HTML渲染器开始遍历DOM,发现前方有一个DIV
然后,HTML渲染器跑去样式表,这个DIV有这些class和id
符合这个DOM的选择器的样式全都记录下来~
……就这样,直到整个HTML被渲染完成。
答主似乎理解成了CSS里面写一个.dom1
就是让HTML解释器去找class=dom1
的HTML元素,全都改成{...}
里面的样式,这个理解是错误的。
所以,在写CSS的时候,一些公用的东西,可以单独拿出来,方便修改,也方便后面使用。比如:
CSS:
.bold { font-weight:600; }
.yh { font-family: "Microsoft YaHei"; }
.greytext { color: #555; }
HTML:
<p class="bold yh greytext"> 三个样式都有 </p>
<p class="greytext"> 这是灰色字体 </p>
----------2017.03.05 追加----------
CSS会追加两次吗?
每一个DOM都有我们能定义的CSS的所有属性,我们定义样式只是去改变他们的那些样式属性而已。
比如:<p>默认样式的p标签</p>
我们没有指定他的颜色,但是实际上,这个p标签的color
属性是#000
(黑色的)。
然后重复定义的样式会覆盖前面的定义,比如:
CSS:
.dom0 { color: #222; }
.dom1 { color: #333; }
HTML:
<p class="dom0 dom1">猜猜我是什么颜色</p>
↑ 这个p标签颜色最后会是#333
。因为#222
虽然也被记录下来了,但是他在前面,被覆盖了。
如果HTML如下,也会被覆盖:
HTML:
<p class="dom0 dom1" style="color:#444">猜猜我是什么颜色</p>
↑ 这个p标签颜色会是#444
。因为标签自带的样式定义优先级是最高的。(他定义在所有样式表后面。)
有一个方法可以不被覆盖,那就是加入!important
。(IE6及以下不支持)
具体可以参考http://www.w3chtml.com/css3/r...
CSS:
.dom0 { color: #222 !important; }
.dom1 { color: #333; }
HTML:
<p class="dom0 dom1">猜猜我是什么颜色</p>
↑ 这是p标签的颜色就是#222
,因为加了!important
,所后面给他的样式都不会覆盖这一条。
这篇关于css - 这样写样式浏览器会选取 DOM 元素两次吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!