css选择器、层叠、继承

引言：

昨天仿写微信盆友圈的页面时，点赞的小爱心使用了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、选择器的优先级

1. 什么是选择器的优先级？

   当一个元素有多个不同的选择器设置的样式时，浏览器应用的样式是哪一个，这就需要依靠选择器的优先级来确定；如下：

   <div class="container">
       <span class="area" id="area"></span>
   </div>
   

   #area{
       background-color:green;
   }
   span{
       background-color: yellow;
   }
   .area{
       background-color:red;
   }
   

   最后显示的样式为绿色：

   

   这是因为id选择器的优先级高，所以表现为绿色；

2. 怎样确定选择器优先级的大小？

   • 规则是这样的：

     一个选择器的优先级由一个4部分的数表示，数的左边的位上的数字比数的右边的位上的数字的优先级高；

     

     比如(1,0,0,0) 的优先级比 (0,11,0,0) 的优先级高；

     注：比较选择器的优先级的前提是两选择器作用的是html中的同一元素；

   • 选择器的优先级的计算方式：

     • 第一位加1：如果某个元素具有内联样式，虽然没有选择器，具有内联样式时此位恒为1；
     • 第二位加1：如果选择器包含一个id选择器时；
     • 第三位加1：如果选择器包含一个类选择器、伪类选择器或属性选择器时；
     • 第四位加1：如果选择器包含一个元素选择器或伪元素选择器时；

     注：通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

   • 下面我们来举几个栗子（以下的例子中的两个选择器都是作用于同一元素的，当作用于不同元素时加上继承的角度去考虑）：

     1. 有如下代码

        <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)高，所以浏览器显示的样式为黄色：

        

     2. 有如下代码

        <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)高，所以浏览器显示的样式为绿色：

        

     3. 有如下代码

        <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选择器的优先级高；）

3. 特别要注意的是!important

   从前面我调爱心❤️的经历可以知道，使用!important可以将相应css代码的优先级提到超越所有选择器的优先级的级别；

   注：

   • 注意优先级是对同一属性而言的

     （eg：当某一属性有max-width:100px;时，即使有width:200px !important;也不会生效；）

   • 使用!important会造成麻烦，尽量不用；