您现在的位置是：网站首页> 编程资料编程资料

低权重原则——避免滥用子选择器CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-07 648人已围观

简介 CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式，经验告诉我，低权重原则——避免滥用子选择器，感兴趣的朋友可以参考本文，希望对大家有所帮助

CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。

如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

如果忽略了CSS选择符权重，会产生意想不到的小麻烦。

需求与方案

复制代码

代码如下:

CSS 选择符权重很重要

现在需要将“很重要”三个字设置为红色，我们的做法如下：

方案一，利用子选择器

复制代码

代码如下:

CSS 选择符权重很重要

方案二，新建class

复制代码

代码如下:

CSS 选择符权重很重要

很多工程师推荐使用方案一，因为使用子选择器可以避免新增class，让HTML代码更简洁。这么考虑是有道理的，但如果这时需求有变化，需要添加新的文字进来。

改变需求

复制代码

代码如下:

CSS 选择符权重很重要，我们要小心处理

要求将‘小心处理’设置为绿色，我们可能会这样做。

复制代码

代码如下:

CSS 选择符权重很重要，我们要小心处理

本以为‘小心处理’会设置为绿色，但被权重更高的#test span设置为红色。子选择器在无意中影响到了我们新添加的代码。如果想要达到我们的预期，重写代码如下

复制代码

代码如下:

CSS 选择符权重很重要，我们要小心处理

而如果使用方案二，情况会怎么样呢

复制代码

代码如下:

CSS 选择符权重很重要，我们要小心处理

因为没有子选择器，所以我们给新添加的代码挂上新的class，就可以顺利地完成样式设置了。

小结
使用子选择器，会增加CSS选择符的权重，CSS选择符权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。所以，除非确定HTML结构非常稳定，不会再修改了，否则尽量不要使用子选择器。为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权重尽可能低。

低权重原则——避免滥用子选择器

上一篇：给表格设置不重叠的边框(单线边框)的2种方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：纯CSS实现箭头、气泡让提示功能具有三角形图标使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）CSS制作箭头图标代码(圆，三角形，椭圆) css实现的交互小三角箭头图标CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)GitHub倡导的CSS编写风格及文件目录部署指南完美解决调用上级目录中的css样式文件的路径问题CSS拾遗之箭头,目录,图标的实现代码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢