风向 网站,网站设计注意因素,企业平台网,代做网站公司有哪些CSS的选择符是有权重的#xff0c;当不同选择符的样式设置有冲突时#xff0c;会采用权重高的选择符设置的样式。 如果CSS选择符权重相同#xff0c;那么样式会遵循就近原则#xff0c;哪个选择符最后定义#xff0c;就采用哪个选择符的样式。 如果忽略了CSS选择符权重当不同选择符的样式设置有冲突时会采用权重高的选择符设置的样式。 如果CSS选择符权重相同那么样式会遵循就近原则哪个选择符最后定义就采用哪个选择符的样式。 如果忽略了CSS选择符权重会产生意想不到的小麻烦。 需求与方案 style type”text/css”
#test { font-size: 14px; }
/style
p id”test”CSS 选择符权重很重要/p 现在需要将“很重要”三个字设置为红色我们的做法如下 方案一利用子选择器 style type”text/css”
#test { font-size: 14px; }
#test span { color: red; }
/style
p id”test”CSS 选择符权重span很重要/span/p 方案二新建class style type”text/css”
#test { font-size: 14px; }
.red { color: red; }
/style
p id”test”CSS 选择符权重span class”red”很重要span/p 很多工程师推荐使用方案一因为使用子选择器可以避免新增class让HTML代码更简洁。这么考虑是有道理的但如果这时需求有变化需要添加新的文字进来。 改变需求 style type”text/css”
#test { font-size: 14px; }
#test span { color: red; }
/style
p id”test”CSS 选择符权重span很重要/span 我们要小心处理/p 要求将‘小心处理’设置为绿色我们可能会这样做。 style type”text/css”
#test { font-size: 14px; }
#test span { color: red; }
.green { color: green; }
/style
p id”test”
CSS 选择符权重span很重要/span 我们要span class”green”小心处理span/p 本以为‘小心处理’会设置为绿色但被权重更高的#test span设置为红色。子选择器在无意中影响到了我们新添加的代码。如果想要达到我们的预期重写代码如下 style type”text/css”
#test { font-size: 14px; }
#test span { color: red; }
#test .green { color: green; }
/style
p id”test”
CSS 选择符权重span很重要/span 我们要span class”green”小心处理span/p 而如果使用方案二情况会怎么样呢 style type”text/css”
#test { font-size: 14px; }
.red { color: red; }
.green { color: green; }
/style
p id”test”CSS 选择符权重span class”red”很重要span我们要span class”green”小心处理span/p 因为没有子选择器所以我们给新添加的代码挂上新的class就可以顺利地完成样式设置了。 小结 使用子选择器会增加CSS选择符的权重CSS选择符权重越高样式越不容易被覆盖越容易对其他选择符产生影响。所以除非确定HTML结构非常稳定不会再修改了否则尽量不要使用子选择器。为了保证样式容易被覆盖提高可维护性CSS选择符需要保证权重尽可能低。 低权重原则——避免滥用子选择器转载于:https://www.cnblogs.com/mackxu/p/chlid-selector.html
