关于css:css层叠优先级和继承

38次阅读

共计 1174 个字符,预计需要花费 3 分钟才能阅读完成。

层叠

当申明抵触时,层叠会根据三种条件解决抵触。
(1) 样式表的起源:款式是从哪里来的,包含你的款式和浏览器默认款式等。
(2) 选择器优先级:哪些选择器比另一些选择器更重要。
(3) 源码程序:款式在样式表里的申明程序。

选择器优先级规定

❑如果选择器的 ID 数量更多,则它会胜出(即它更明确)。
❑ 如果 ID 数量统一,那么领有最多类的选择器胜出。
❑ 如果以上两次比拟都统一,那么领有最多标签名的选择器胜出。

伪类选择器(如:hover)和属性选择器(如[type="input"])与一个类选择器的优先级雷同。通用选择器(*)和组合器(>、+、~)对优先级没有影响。

两条教训法令

(1) 在选择器中不要应用 ID。就算只用一个 ID,也会大幅晋升优先级。当须要笼罩这个选择器时,通常找不到另一个有意义的 ID,于是就会复制原来的选择器,而后加上另一个类,让它区别于想要笼罩的选择器。
(2) 不要应用!important。它比 ID 更难笼罩,一旦用了它,想要笼罩原先的申明,就须要再加上一个!important,而且仍然要解决优先级的问题。

继承

如果一个元素的某个属性没有层叠值,则可能会继承某个先人元素的值。
但不是所有的属性都能被继承。默认状况下,只有特定的一些属性能被继承,通常是咱们心愿被继承的那些。它们次要是跟文本相干的属性:color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space 以及 word-spacing。还有一些其余的属性也能够被继承,比方列表属性:list-style、list-style-type、list-style-position 以及 list-style-image。表格的边框属性 border-collapse 和 border-spacing 也能被继承。

继承属性会程序传递给后辈元素,直到它被层叠值笼罩。

非凡值

应用 inherit 关键字

用 inherit 关键字。能够用它来笼罩另一个值,这样该元素就会继承其父元素的值。

应用 initial 关键字

当一个属性没有层叠值且不是继承属性时就会应用属性的初始值,当然咱们也能够设置 initial 关键字来显式应用初始值。css 每个属性都有初始值,它和浏览器相干,不同浏览器可能会有差别,然而要记住它不属于浏览器默认样式表(用户代理表)

简写属性

很多属性都能够简写,如 font,background,margin,padding 等。
大多数简写属性能够省略一些值,只指定咱们关注的值。然而要晓得,这样做依然会设置省略的值,即它们会被隐式地设置为 初始值(不是继承值)。这会默默笼罩在其余中央定义的款式。

正文完
 0