[郑州|结业弟子]JS-冯思伟|2019年04月14日的日报-技能树.IT修真院

发表于： 2019-04-14 20:49:05

1 849

今天完成的事：任务8的第二个页面

遇到的问题：学习了网格布局

hover 后面有有空格

！import

!important，作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。

在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

下面这个提纲描述了CSS文档是如何确定给不同的样式分配不同的权重的。在CSS规范中提及的关于层叠的一个大体概括：

找到所有作用于元素和属性的声明
一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序，下面这个列表中越靠前的权重越小:
1. 用户代理声明（译注：如浏览器默认样式）
2. 用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）
3. 开发者声明（译注：如页面中引用的CSS）
4. 带有!important的开发者声明
5. 带有!important的用户声明
样式的应用依赖具体的情况，一个更加具体的选择器往往会比一个笼统选择器获得更大的权重。
样式的应用依赖样式出现的顺序（即，后面的会覆盖前面的）

从这个提纲中，你可能已经明白!important会如何改变权重以及它在层叠中扮演一个什么样的角色。接下来让我们看一下!important更多的细节。

语法和描述

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的：

#example {  font-size: 14px !important;	}#container #example {  font-size: 10px;}

在上面的代码示例中，由于使用了!important，id为“example”的元素字号将被设置为14px。

如果不使用!important，第二个样式声明的代码块很自然地比第一个的权重要大，原因有二：在样式表中第二个代码块要比第一个出现的晚（即，它位列第二）；第二个代码块有更大的权重（是由两个id，#container #example组合而成，而不是只有一个id，#example。但是因为第一个代码块里面包含了!important，所以对于字号设置来说它有更大的权重。

见CSS权重与继承中关于权重的计算方法，如下图:
——译者：David

关于!important应该注意的一些地方：

当!important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性，在CSS2 中它被颠倒了过来。
如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
关
应用 display: grid 的元素。这是所有网格项（grid item）的直接父级元素。在这个例子中，container就是网格容器(Grid Container)。
HTML 代码:
```
<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>
```
网格项(Grid Item)
网格容器（Grid Container）的子元素（例如直接子元素）。这里 item 元素就是网格项(Grid Item)，但是 sub-item 不是。
HTML 代码:
```
<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>
```
网格线(Grid Line)
构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。