引言:
昨天仿写微信盆友圈的页面时,点赞的小爱心使用了iconfont的爱心图标,写css的时候想把爱心改成和后面的微信昵称一样大小,可是不管我怎么样在我的代码上魔改,就是改不了爱心的大小,心塞~
后面看到iconfont的css文件里使用了!important
,根据我的隐约印象,我知道可能就是因为这个原因,所以我才改不了爱心的大小;查资料确认了一下,使用了!important
的属性的优先级将会窜到NO.1,力压群魔;于是我在我自己的css中加入了!important
,然后我的爱心就变小了,Perfect~
于是有了这样的问题,我们本来想要小爱心,显示出来的却是大爱心,为什么显示出来的效果不是我们想要的效果?我们写页面的时候写了一堆样式,为什么显示出来的就是这个样式?为什么不是其它样式?这个问题可以简化成以下的问答:
问:如何知道某个元素的css样式是什么样的?
答:层叠、继承、优先级三个概念一起来控制某个元素的css样式是什么样的;
下面,我们一起来从层叠、继承、优先级来讨论如果有多个应用于某个元素的css样式时,为什么会显示这个样式,而不会显示另外一个样式;
1、层叠
层叠的概念是如果优先级相等,对于同一元素,后面的css样式会覆盖前面的css样式;
首先有如下代码和效果:
<div class="container">
<div class="area"></div>
</div>
.area{
width: 50px;
height: 50px;
background-color: red;
}
加上一个样式的代码后的效果:
.area{
width: 50px;
height: 50px;
background-color: red;
}
.area{
background-color: green;
}
结果是绿色覆盖了红色,样式最后表现为绿色(原谅色)。
所以层叠会影响表现的样式;
2、继承
继承的概念是子元素会继承父元素的某些属性,从而表现出和父元素一样的样式;
这里要注意的是有些元素可以被继承(eg:color,font-family),有些则不能被继承(eg:height,width);
首先有如下代码和效果:
<div class="container">
<div class="area"></div>
</div>
.container{
color:green;;
}
子元素内的字体颜色继承了父元素字体颜色,所以两父子内的字体都显示绿色;
给子元素的字体加上别的字体颜色后:
.container{
color:green;;
}
.area{
color:red;
}
可以知道当没有给子元素指定属性时,子元素会从父元素继承属性;
所以继承会影响表现的样式;
3、选择器的优先级
-
什么是选择器的优先级?
当一个元素有多个不同的选择器设置的样式时,浏览器应用的样式是哪一个,这就需要依靠选择器的优先级来确定;如下:
<div class="container"> <span class="area" id="area"></span> </div>
#area{ background-color:green; } span{ background-color: yellow; } .area{ background-color:red; }
最后显示的样式为绿色:
这是因为id选择器的优先级高,所以表现为绿色;
-
怎样确定选择器优先级的大小?
-
规则是这样的:
一个选择器的优先级由一个4部分的数表示,数的左边的位上的数字比数的右边的位上的数字的优先级高;
比如(1,0,0,0) 的优先级比 (0,11,0,0) 的优先级高;
注:比较选择器的优先级的前提是两选择器作用的是html中的同一元素;
-
选择器的优先级的计算方式:
- 第一位加1:如果某个元素具有内联样式,虽然没有选择器,具有内联样式时此位恒为1;
- 第二位加1:如果选择器包含一个id选择器时;
- 第三位加1:如果选择器包含一个类选择器、伪类选择器或属性选择器时;
- 第四位加1:如果选择器包含一个元素选择器或伪元素选择器时;
注:通用选择器 (
*
),组合符 (+
,>
,~
, ’ '),和否定伪类 (:not
) 不会影响优先级。 -
下面我们来举几个栗子(以下的例子中的两个选择器都是作用于同一元素的,当作用于不同元素时加上继承的角度去考虑):
-
有如下代码
<div class="a1"> <div class="a2"> <div class="a3"> <div class="a4" id="a"> </div> </div> </div> </div>
.a1>.a2>div:first-child{ background-color: pink; }/*优先级为(0,0,3,1)*/ #a{ background-color: yellow; }/*优先级为(0,1,0,0)*/
因为(0,1,0,0)的优先级比(0,0,3,1)高,所以浏览器显示的样式为黄色:
-
有如下代码
<div class="a1"> <div class="a2"> <div class="a3"> <div class="a4"> <div class="a5"> <div class="a6"> <div class="a7"> <div class="a8"> <div class="a9"> <div class="a10"> <div class="a11" id="a"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
#a{ background-color: green; }/*优先级为(0,1,0,0)*/ .a1>.a2>.a3>.a4>.a5>.a6>.a7>.a8>.a9>.a10>.a11{ background-color: red; }/*优先级为(0,0,11,0)*/
因为(0,1,0,0)的优先级比(0,0,11,0)高,所以浏览器显示的样式为绿色:
-
有如下代码
<div class="a1 a2"> </div>
.a2{ background-color: blue; }/*优先级为(0,0,1,0)*/ .a1{ background-color: orange; }/*优先级为(0,0,1,0)*/
因为两选择器的优先级相等,所以根据层叠原理,浏览器显示的样式为橙色:
其实我们有一个简便的思想来大概确定选择器的优先级:
可以通俗的这样认为,哪个选择器更加唯一的确定一个元素,那么这个选择器的优先级就更高;
(eg:因为一个元素只能有一个id,但却可以有多个不同的class,因此一个id能确定一个唯一地元素,但一个class却不行,所以id选择器的优先级比class选择器的优先级高;)
-
-
-
特别要注意的是
!important
从前面我调爱心❤️的经历可以知道,使用
!important
可以将相应css代码的优先级提到超越所有选择器的优先级的级别;注:
-
注意优先级是对同一属性而言的
(eg:当某一属性有
max-width:100px;
时,即使有width:200px !important;
也不会生效;) -
使用
!important
会造成麻烦,尽量不用;
-