属性
- style
引入外部文件
- link
标签在页面内引入
- style
文件
- index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <link rel="stylesheet" type="text/css" href="body.css">
- <style type="text/css">
- body { background: red; }
- </style>
- </head>
- <body style="background: yellow;">
- </body>
- </html>
文件
- body.css
- body {
- background: green;
- }
和
- link
标签放在
- style
内,还是放在
- head
内,或者放在
- body
标签结尾,页面都会呈现
- html
- yellow
上的
- body
标签
- style
和
- link
标签的先后顺序。
- style
在前,
- link
标签在后,页面呈现
- style
,相反,页面会呈现
- red
- green
- id
- class
- id
在一个页面中
值应该是唯一,但是,当出现多个相同
- id
时,样式对所有
- id
节点是有效的,使用方式:
- id
后面跟节点
- #
值
- id
- <body>
- <p id="id_p">
- 第一个段落
- </p>
- <p id="id_p">
- 第二个段落
- </p>
- </body>
- #id_p {
- color: red;
- }
结果显示,两个段落中的文字都呈现
- red
相对
- id
和标签具有更高的权重,当
- class
和
- id
、标签同时对一个节点设置样式时,
- class
的权重为最高
- id
和
- link
标签对同一个
- style
设置样式时,后引入的样式覆盖之前的样式
- id
- class
使用
可以对多个节点同时设置样式,并且可以叠加
- class
使用。使用方式
- class
后面跟节点单个
- .
名
- class
- <body>
- <p class="class-p">
- 第一个段落
- </p>
- <p class="class-p class-p-2">
- 第二个段落
- </p>
- </body>
- .class - p {
- color: red;
- }.class - p - 2 {
- color: green;
- }
此时,第一个段落呈现
,第二个段落呈现
- red
- green
调整
- html
- <body>
- <p class="class-p">
- 第一个段落
- </p>
- <p class="class-p-2 class-p">
- 第二个段落
- </p>
- <!-- 调换class-p 和 class-p-2 的顺序 -->
- </body>
调整
和
- class-p
的位置后,页面呈现效果不变。说明:
- class-p-2
样式的渲染和
- class
的使用顺序无关,与
- class
样式设置的先后顺序有关,同权重的
- class
样式,在样式设置中,靠后的样式设置覆盖之前的样式设置
- class
通过节点上的属性也可以得到要进行样式设置的节点
- <body>
- <p>
- 第一个段落
- </p>
- <p title="第二个段落的title">
- 第二个段落
- </p>
- </body>
- [title] {
- color: red;
- }
第二个段落有
属性,所以第二个段落呈现
- title
- red
通过标签名获取节点进行样式设置
- <body>
- <p>
- 第一个段落
- </p>
- <p>
- 第二个段落
- </p>
- </body>
- p {
- color: red;
- }
页面中所有
标签节点呈现
- p
- red
以上四种方式可以混合使用,对相应的节点进行样式设置。结合方式包括层级嵌套、样式叠加、节点关联等。最终以权重高者为呈现效果。
以上四种方式,针对单个而言,
最高,
- id
和属性同级(后面的样式覆盖之前的样式),标签最低。
- class
当四种方式混合使用时,则以权重的结果为准。对同一结点存在的
、
- id
、属性和标签样式进行排序,排位第一者为最终呈现效果。例如:对于节点
- class
存在多种类型的样式设置,首先挑选所有带
- p
的样式,包括嵌套样式。相同
- id
下,对另一类型样式进行排序
- id
- <body class="body">
- <p id="id_p">
- 第一个段落
- </p>
- </body>
- .body#id_p {
- color: red;
- }
- #id_p {
- color: green
- }
虽然两种样式设置都有
,并且
- id
效果在
- green
之后被设置,但是通过排序可以得到相同
- red
下,前一个存在
- #id_p
,所以最终呈现效果为
- .body
- red
存在
、属性和标签的样式时,依次排序,同类型或同权重(
- class
和属性同权重)的样式,靠后的样式覆盖之前的样式(以类型为准,不以名称为准),最终排位第一者为最终呈现效果。
- class
注意:
、
- >
等方式,不会影响最终效果。
- +
、
- :nth-child
、
- :first-child
等伪类高于
- :last-child
和属性
- class
- !important
为样式中的特例,它的权重为最高,高于
- !important
、
- id
、属性、标签以及
- class
属性
- style
- <body class="body" style="background: red">
- </body>
- .body {
- background: green ! important;
- }
页面呈现效果为
。但是当对样式设置进行排序时,仍然是同类型样式下,以另一类型权重高者为最终效果。例如
- green
- body.body {
- background: blue ! important;
- }.body {
- background: green ! important;
- }
相同
及
- class
下,前一种样式设置存在
- !important
标签,后一种则没有,所以最终效果呈现
- body
- blue
。因为
- !important
权重最高,会对节点的该属性做强制性设置,在使用时要慎重
- !important
对插件内的样式属性进行强制复写
- !important
结构时,可以通过
- html
对行内样式进行强制复写
- !important
!important
stylelint
- 在很多时候是不建议使用的,在
!important
- 中有一项规则即禁止使用
!important` 的效果
- 。有一种变通的方式,可以在多数情况下实现类似
- html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>
- css .body .p .span { color: red; } .span.span.span.span.span {/** 自身样式叠加 **/ color: green; }
在不考虑行内样式和
的情况下,对自身样式进行重复叠加多次使用,可以增加
- id
权重,对样式进行复写。
- class
使用前提:
属性
- style
样式
- id
好处:不用考虑
层级关系,减少层级嵌套
- DOM
综合以上说明,权重的计算基本遵从以下规则:
样式嵌套使用,除了增加权重外,也体现了
的某种结构关系。但嵌套并不是在任何情况下都需要的。
- DOM
嵌套的使用并不是越多越好。嵌套越多,权重越大,但同时对页面的性能消耗也越大。建议使用继承和样式叠加。
来源: http://www.cnblogs.com/tian-xie/p/7192841.html