CSS-important的作用+::before 和::after 中双冒号和单冒号

1,024 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第7天
1.important 的作用。
定义及语法
!important,作用是提高指定样式规则的应用优先权(优先级)。

语法格式
{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}。 在 CSS 中,通过对某一样式声明! important ,可以更改默认的 CSS 样式优先级规则,使该条 样式属性声明具有最高优先级。

浏览器识别
ie7 及 ie7+,firefox,chrome 等浏览器下,已经可以识别 !important 属性, 但是 IE 6.0IE6 及更 早浏览器下仍然不能完全识别。important 的样式属性和覆盖它的样式属性单独使用时(不在一 个{}里),IE 6.0 认为! important 优先级较高,否则当含! important 的样式属性被同一个{}里的样 式覆盖时,IE 6.0 认为! important 较低!。

2.::before 和::after 中双冒号和单冒号有什么区别、作用。
在 CSS 中伪类一直用 : 表示,如 :hover, :active 等
伪元素在 CSS1 中已存在,当时语法是用 : 表示,如 :before 和 :after
后来在 CSS3 中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类
由于低版本 IE 对双冒号不兼容,开发者为了兼容性各浏览器,继续使使用 :after 这种老语法表 示伪元素。

单冒号(:)用于 css3 的伪类
双冒号(::)用于 css3 的伪元素
想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
在代码顺序上,::after 生成的内容也比::before 生成的内容靠后。
如果按堆栈视角,::after 生成的内容会在::before 生成的内容之上

作用:::before 和::after 的主要作用是在元素内容前后加上指定内容。
伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次,并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同