点此查看 所有教程、项目、源码导航

本文目录

  • 1. 前言
  • 2. 就近原则
  • 3. 实例验证
  • 4. 小结

1. 前言

在上一篇文章中，我们介绍了内联样式、内部样式表、外部样式表，这三种样式都会影响到网页上的元素。

那么如果三种方式同时作用于同一个元素，元素该按什么规则显示呢。

这就涉及到CSS选择器优先级问题，本篇就此进行介绍。

2. 就近原则

网页元素在应用样式代码时，遵循就近原则，也是就是，谁跟网页元素关系近，就用谁的规则。

所以，内联样式直接就在元素标签上，优先级最高；内部样式表就在本王爷内，优先级次之；外部样式表单独文件存储，优先级最低。

3. 实例验证

我们通过一个实例来验证下：

首先编写外部样式文件style.css，代码如下：

.out-style {
    color: red;
}

然后编写网页，并引用外部样式文件，且定义内部样式表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引用外部样式表 -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        .in-style {
            color: green;
        }
    </style>
</head>
<body>
    <div class="out-style in-style">
        好好学习
    </div>
    <div class="out-style in-style" style="color:blue">
        天天向上
    </div>
</body>
</html>

对于“好好学习”部分，同时应用了外部样式表的out-style和内部样式表的in-style，因为内部样式表优先级高，所以会显示绿色字体。

对于“天天向上”部分，同时应用了外部样式表、内部样式表的样式，而且还编写了内联的样式，因为内联的优先级最高，所以会显示蓝色字体。

最终效果如下：

4. 小结

当我们引用别人编写的样式文件后，如果对效果不满意，可以利用优先级规则，编写我们自己想要的CSS代码。

如果我们自己编写的CSS代码优先级更高，就能覆盖引用样式文件的效果，从而实现我们自己的目标。

更多推荐

零基础CSS入门教程(25)–选择器优先级