各位在编写样式时有遇到以下问题吗？

  1. 在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖

  2. 有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）

  3. 有时候设置标签样式没有效果

问题一解答：

为什么在设置标签的样式时 选择器相同的情况下  样式相同会被覆盖？
--这是因为CSS的层叠性
--层叠性：是指相同的选择器设置相同的样式时，一个样式会覆盖另一个样式 层叠性主要用来解决样式冲突问题
--在样式冲突时，遵循就近原则（后来居上），样式不冲突就不会层叠  因为代码顺序执行

例如：

<html lang="en">
  <head><style>
        .box {
            width: 100px; height: 100px;background-color: red;
        }
        .box {         /*相同的选择器*/
            background-color: orange;   /*相同的样式，会被覆盖上面的背景颜色red*/
             border: 3px solid green;  /*不同的样式 不会被覆盖*/
        }
    </style></head>
    <body>
         <div class="box">box</div>
    </body>
    </html>

效果图：

问题1.png

问题二解答：

有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）？
--这是因为CSS的继承性
--继承性:子标签会继承父标签的某些样式 如文字颜色和大小 以text-,line-,font-开头的会被继承

例如：

 <html>
        <style>
            /*只设置父标签div的样式 没有设置子标签p的样式*/
            .box {         
            width: 100px;
            height: 100px;
            background-color: violet;
            color: greenyellow;
            font-size: 25px;
        }
         </style>
    <div class="box">   <!----父标签----->
           <p>我是小钟</p>    <!------子标签------>
     </div>
</html>

效果图：

问题二.png

问题三解答：

为什么有时候设置标签样式没有效果？
--这是因为CSS中的优先级
--优先级（权重）：当给一个标签设置样式时，选择不同的选择器时， 会执行选择器权重高的样式，选择器权重低的样式不会被执行 
--权重可以叠加

优先级（权重）表格：

选择器 选择器的权重
继承或者* 0.0.0.0
标签选择器 0.0.0.1
类选择器，伪类选择器 0.0.1.0
id选择器 0.1.0.0
行内样式 1.0.0.0
！important 无穷大 
可以简单的记忆：
---继承和通配符的权重为0
---标签选择器的权重为1
---类选择器以及伪类选择器的权重为10
---id选择器的权重为100
---行内样式的权重为1000
--- !important 的权重为无穷大

权重叠加：

--如：
  -- p #text {}    权重为 1 + 100 = 101
  -- .a1 #w {}   权重为 10 + 100 = 110

继承例子：

<html>
    <style>
        /*继承权重为0*/
        .box1{
             width: 100px; height: 100px;border: 2px solid black;
            color: green;    
        }
        p{
            color:red;      
        }
    </style>
    <div class="box1">    
        <p>小钟</p>
    </div>
</html>

效果图：

继承.png

权重叠加例子：

<html>  
    <style>
            .box2 {               /* 权重为 0.0.1.0 */
                width: 10px;
                height: 10px;
                background-color: coral;
            }
            .box1 .box2 {           /* 权重为0.0.1.0 + 0.0.1.0 = 0.0.2.0 */
                width: 200px;
                height: 200px;
                background-color: greenyellow;
            }
     </style>
    <div class="box1">
        <div class="box2">我是一个盒子</div>
    </div>
</html>

效果图：

权重叠加.png