乐趣区

关于css:CSS学习笔记一-层叠优先级和继承

jiezi
  1. 层叠与优先级

当多个选择器抉择了 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

  1. 继承

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

<!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;

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

退出移动版