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屋！