HTML中CSS样式的优先级

  css样式的优先级基于它的继承性。在此篇没有提及标签选择器和通配符选择器,但它们的优先级很低,仅高于body!

  并且所介绍的都是单个选择器的优先级,因为组合型的选择器就是单个选择器优先级的累加。

css样式的优先级在本篇中按从低到高的顺序排列,就是目录的顺序


CSS中body的样式

我们知道每一个 HTML 页面都有一个 body 元素。

想要证明body元素的存在,将其 background-color 设置为红色。

把以下代码添加到我们的style标签中:

body {
  background-color: red;
}

即使在网页中除style外并没有任何标签,仍然变成了红色,现在我们已经证明,每个HTML页面都有一个body元素,并且它的body元素同样能够应用样式。

记住,你可以像任何其他HTML元素一样对你的body元素应用样式,并且所有其他元素都将继承你的body元素的样式。

body样式的覆盖(class会覆盖body中的样式)

body作为一个顶级父类,一般情况任意的样式都将覆盖它

创建一个h1标签

在body的样式表中加入一个 color:green, 此时h1中的文本变成了绿色

有时你的 HTML 元素会得到多个相互冲突的样式。

例如,你的 h1 元素不能同时为绿色和粉色。

给你的h1添加一个class,pink-text

在style中加入,并设置颜色为粉色

你会发现,h1的颜色变为了粉色

使用class 会覆盖 body 元素的 CSS,这点可以理解为继承中的重写

多个class处理样式覆盖

创建一个名为 blue-text 的 CSS class,其颜色设置为蓝色,确保它在 pink-text class 声明之下。

除了 pink-text class 之外,你还可以将 blue-text class 应用到你的 h1 元素,让我们看看哪一个会被应用。

如下例子所示,通过用空格分隔多个 class 属性,可让 HTML 元素应用多个 class 属性:

class="class1 class2"

注意:在 HTML元素中列出这些 class 的顺序并不重要。但是,< style\> 部分中的 class 声明的顺序是重要的,第二个声明将始终优先于第一个声明。因为优先级相同时,则采用就近原则,选择最后出现的样式, .blue-text 是第二个声明,它会覆盖 .pink-text 的属性。


通过ID的样式属性覆盖class类的声明

我们刚刚证明了,浏览器是从上到下读取CSS。这意味着,如果发生冲突,浏览器将使用最后的任何CSS声明。

我们还有其他覆盖 CSS 的方法。你还记得 id 属性吗?

我们来覆盖你的 pink-text 和 blue-text class,并使你的 h1 元素变成橙色,给 h1元素一个id,然后对该id进行样式化。

给你的 h1 元素添加名为 orange-text 的 id 属性。记住,id 样式如下所示:

在你的 h1 元素中保留 blue-text 和 pink-text class。

为你的 style 元素中的 orange-text id 创建一个 CSS 声明。如下例子所示:

#brown-text {    
  color: brown;    
}

注意:你是否将这个css声明在pink-text class之上或之下无关紧要,因为id属性始终是具有更高的优先级。

通过内联样式覆盖class类的声明

我们已经证明了,id 声明都会覆盖 class 声明,不管它在你的 style 元素 CSS 的哪个位置进行声明。

内联样式可以覆盖其他CSS。

使用 in-line style(内联样式)来尝试使我们的 h1 元素变为白色。就是标签内的style属性,
内联样式如下所示:

<h1 style="color: white;">

在你的 h1 元素上保留 blue-text 和 pink-text class。

通过使用Important覆盖所有其他样式

我们刚证明了内联样式将覆盖style 中定义的所有 CSS声明。
可是,有最后一个终极方法来覆盖CSS。但在我们这样做之前,让我们来谈谈你为什么要覆盖CSS。

在许多情况下,将使用CSS库。这些可能会意外覆盖自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时,可以使用 !important。

让我们回到之前的 pink-text class 声明。请记住,我们的 pink-text class 被后续的 class 声明、id 声明和内联样式覆盖了。

我们来给 pink-text 元素的 color 声明加上关键字 !important,以使 100% 确保你的 h1 元素是粉色的。

举例如下:

color: pink !important;
  • 颜色除了使用单词还可以用 hex code(‘#000000’这样的形式),是16进制符号,(提到16进制,我们会发现刚好是作为rgb值的范围(0-255),每两个字符对应rgb中的一个值)
  • 或者rgb()函数,rgba()函数
    rgb指红绿蓝,范围在0到255
    a是透明度,范围在0到1

猜你喜欢

转载自blog.csdn.net/xinyan233/article/details/80054521