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

层叠与优先级

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

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: black;
        }
        #title {
            color: orange;    
        }
        .nav {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="title" class="nav">
        Hello World
    </h1>
</body>
</html>

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

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

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

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

经验上来讲

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

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

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

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

继承

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: serif;
        }
    </style>
</head>
<body>
    <h1 id="title" class="nav">
        Hello World
    </h1>
</body>
</html>

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

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

1.3 特殊值

1.3.1 inherit

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

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color:red;
        }
        .nav {
            color: green;
        }
        .nav a {
            color: inherit;
        }
    </style>
</head>
<body>
    <h1 id="title" class="nav">
        <a>Hello World</a>
    </h1>
</body>
</html>

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

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;

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

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

yuzuki

引用和评论

什么是S-expression

CSS grid 布局如何添加分隔线?

Html&Css测试试题（简单版）

浏览器如何确定最终的CSS属性值？解析计算优先级与规则

原子化的未来？了解一下全面进化的CSS attr函数

万能的渐变！CSS 渐变实现自适应进度条

CSS专题之继承