CSS学习笔记一 层叠，优先级和继承

1. 层叠与优先级

当多个选择器选择了html中的同一个元素时，并且定义了冲突的属性，不去写代码验证的情况下，应该怎么确定哪个选择器定义的属性会生效？

例如 ：

    
    
    
    


    

        Hello World
    

如果你去验证的话，会发现是ID选择器生效了！

当我们注释掉ID选择器时，会发现class选择器生效了。从这个例子中可以看到，选择器生效的优先级应该是
ID选择器 > class选择器 > 标签选择器
层叠就是如果，多个属性叠加，有些属性可能被覆盖了，哪些属性在上层，就是靠优先级来判断的。

此外，还有一些优先级的原则

例如，!important申明具有更高的优先级，但是如果两个冲突的申明都被声明为 `important呢？可以利用声明的顺序来判断，越晚声明的属性，优先级越高！

经验上来讲

1. 越具体的声明优先级越高 ：例如，我用多个ID选择器确定了一个元素就比单个ID选择器确定一个元素要更加具体

2. 越后面的声明优先级越高

3. 行内样式的声明高于外部引入的样式

4. 尽量不要用ID选择器和!important

1. 继承

如果一个元素没有层叠值，则可能会继承某个祖先元素的值，例如

    
    
    
    


    

        Hello World
    

然后你打开开发者工具，应该会看到这个字段

需要注意的是，不是所有的属性都是可以继承的，一般情况下，跟文本相关的属性会被继承。

1.3 特殊值

1.3.1 inherit

有时，我们想要用继承代替一个层叠值，这种情况下，可以使用inherit关键字。

例如

    
    
    
    


    

        Hello World
    

这时你会看到，字体是绿色而不是红色

1.3.2 initial

使用initial关键字可以撤销元素的样式，使元素变成默认样式。

需要注意的是display: initial等价于display: inline而不是diplay: block

1.4 简写属性

例如：

margin: 0 1 2 3 等价于

margin-top: 0;
margin-right: 1;
margin-bottom: 2;
margin-left: 3;

margin: 1 2等价于

margin-top: 1;
margin-right: 2;
margin-bottom: 1;
margin-left: 2;

margin: 1 2 3等价于

margin-top: 1;
margin-right: 2;
margin-bottom: 3;
margin-left: 2;

也就是说，没有指定的边的值会变成对边的值