01.样式类型
- 行间:
<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>
- 内联:
<style> h1 { color : #000 ; } </style>
- 外部:
<link rel="stylesheet" href="css/style.css">
02.选择器类型
- 1、ID
#id
- 2、class
.class
- 3、标签
p
- 4、通用
*
- 5、属性
[type="text"]
- 6、伪类
:hover
- 7、伪元素
::first-line
- 8、子选择器、相邻选择器
03.权重计算规则
- 第一等:代表内联样式,如:
style=''
,权值为1000。 - 第二等:代表ID选择器,如:
#content
,权值为0100。 - 第三等:代表类,伪类和属性选择器,如
.content
,权值为0010。 - 第四等:代表类型选择器和伪元素选择器,如
div p
,权值为0001。 - 通配符、子选择器、相邻选择器等的。如
*、>、+
,权值为0000。 - 继承的样式没有权值。
04.比较规则
1,0,0,0 > 0,99,99,99
。也就是说从左往右逐个等级比较,前一等级相等才往后比。- 无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。
- 在权重相同的情况下,后面的样式会覆盖掉前面的样式。
- 通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。
05. !important
!important
的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)
<style>
p{
color:red !important;
}
</style>
<p style="color:blue;">我显示红色</p>
参考自:参考