CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式）_html/css_WEB-ITnose

CSS有3种工作机制：1.继承 2.层叠 3.特指 （其中层叠原则是基于继承和特指的）

1.继承 ：css中的祖先元素会向后代传递一样东西：CSS属性的值。body是所有元素的祖先，如果我们指定body{color:red;},那么文档中的所有元素都继承这一样式。这就是为什么，我们在记事本程序写了一行字以后，重命名为：xxx.html，在用不同浏览器打开时，会有不同的字体效果，因为每个浏览器都有自己的预定义样式表，其中包括body中的字体属性，而我们用浏览器打开我们的Html时，我们继承了这个属性。

当然，不是所有的属性都能被继承，能被继承的属性大多数和文本有关，比如颜色、字体、字号等。而有些属性，被继承下来没有意义，或者被继承下来会影响页面的布局，比如涉及元素定位，margin,padding，border等属性。

2.层叠 ：也就是CSS中的C（cascading）,主要是按照样式来源和特指度来层叠。

a）样式来源 ：以下是浏览器层叠各个来源样式的顺序：

1. 浏览器默认样式表
2. 用户样式表（比如有视力障碍的用户，加了一个body{font-size:200%}）
3. 开发者外部样式表（按照引入到页面中的先后顺序）
4. 开发者嵌入样式表
5. 开发者行内样式表
6. 注意：3 4的顺序是看
   • 列表项1
   列表1为黄色

   例子2 ：嵌入样式表和外部样式表，选哪个（主要看浏览器按顺序，后读取的会覆盖点前面读取的），相同特指度的时候    
           
               
   列表项1
   （黄色）外部样式表demo.css

   .li1{
   color:yellow;}

   
   
   

   为黄色

   例子3：选择特指度高的（如按顺序，应该选择link的黄色，但是style中的特指度高 1-0-2 大于 1-0-1，所以选特指度高的红色），后面读取的特指度低的就不会覆盖前面特指度高的。    
           
               
   列表项1

   demo.css

   div #li1{
   color:yellow;}

   为红色

   例子4：行内style有最高优先级，前面的代码不变，只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级，但是行内style本身就不常用（不方便移植，增加网页大小）
   列表项1

   例子5 ：设定的样式优于继承的样式，即使继承的样式特指度高（在li中加入em,em继承了li的特指度是102，em本身的特指度是001，但是仍然选em）    
           
               
   列表项1
               
   列表项为黑色。