前端 - 这样写样式浏览器会选取 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;}

问题解答

回答1：

答主是想问两者在性能上的区别吧？其实两种方式都可以，CSS不是JS，不是说分开写就会去选择DOM两次，CSS更像是这样的过程：

HTML渲染器开始遍历DOM，发现前方有一个p然后，HTML渲染器跑去样式表，这个p有这些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 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，所后面给他的样式都不会覆盖这一条。

回答2：

你这个不是样式吗？什么叫选取dom 啊，应该是渲染dom吧你这样会渲染两次的，很明显第一种写法比较好。

回答3：

看你的应用场景，其实text-align:center可以学着像bootstrap那样，单独抽取出来，用多个class并行

这样不止他们两个可以用，其他元素也可以共用这个class

.text-center{ text-align:center;}.dom0 { color: red; font-size: 12px;}.dom1 { color: blue; font-size: 14px;}<p class='text-center dom0'></p> <p class='text-center dom1'></p> 回答4：

（o´・ェ・｀o） 管你什么样式呢，反正打包后都抽成公共的了~

回答5：

无论你CSS怎样写，CSS解析器会按优先级规则，在渲染DOM元素前计算出最终应用到这个DOM元素上的样式并不是从上到下一次应用样式

回答6：

如果是像你这样的选择器的话 完全没有必要用第一种。因为提取出来的完全没有用。复用不了。你可以将可以复用的功能提取出来，比方说：

.textCenter:{ text-align:center; display:block;}.dom1{ font-size:12px; color:red;}.dom2{ font-size:14px; color:blue;}<p class='textCenter dom1'></p><p class='textCenter dom2'></p><p class='textCenter '></p>回答7：

这两种写法都可以，不过推荐写成公共样式，这样代码简洁一些，也方便管理。

回答8：

你的第一个写法，确实会对同一个渲染两次。另，达到同样的效果，代码越少越好。你该去了解了解sass或less.