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

31次阅读

共计 1743 个字符,预计需要花费 5 分钟才能阅读完成。

  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;

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

正文完
 0