层叠样式表 (CSS) 是 Web 开发的一个强大组件，它使开发人员能够确定其网站的视觉外观。在 CSS 中，类用作选择器，使我们能够将多种特定样式应用于元素。您还可以对特定元素使用多个类。
但是，当您将多个类应用于一个元素时，有必要知道如何指定这些类的呈现顺序，以避免出现差异和意外结果。在本文中，我们将讨论在 CSS 中指定类顺序的不同方法，以及有助于确定优先级的特异性和级联规则的重要性。
CSS 中的类是什么？
在 CSS 中，类是用于将特定样式集应用于 HTML 元素的选择器。它们是强大的工具，使我们能够将元素分组在一起并保持网页上多个元素的一致性。它允许我们在大型网站的许多元素中重用 CSS 样式。
对一个元素使用多个类
如果您在 CSS 中定义了一组类，则可以将它们组合用于特定元素，以使其独特且有吸引力。但是，您必须指定类的顺序，以便编译器顺利运行代码并根据您的需要提供输出。这是通过级联和特异性规则来完成的。
我们在 CSS 文件中定义类的顺序用于确定在将多个类应用于元素时它们的优先级。这是因为 CSS 是级联，这意味着编译器从最后到顶部和从右到左读取它。因此，CSS 代码中最后提到的那个获得优先级。让我们通过一个示例更好地理解这一点。
示例
假设您在 CSS 文件中定义了两个类。
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
由于在 CSS 代码中 .class2 是在 .class1 之后声明的，因此 class2 具有优先级。因此，当我们将 class1 和 class2 应用于 div 元素时，div 元素的样式主要根据 class2 进行设计。
但是，您可以看到 class2 中未提及但 class1 中存在的属性应用于 div 元素。就像class1中提到了text-align: center，但class2中没有提到。但最后一个 div 元素仍然居中对齐。这是因为 class1 中唯一的属性将按原样应用于元素，但是，对于两个类中相同的属性，编译器使用级联规则来渲染它们。< /p>
类的顺序
用 HTML 编写的类的顺序并不决定优先级。考虑以下示例
示例
假设您定义了两个类似于上面示例的类。但是，您已经更改了 HTML 代码中类的顺序。您认为结果会怎样？会和之前的有所不同吗？让我们看看。
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
如您所见，结果没有变化。样式将仅根据 CSS 中提到的类的顺序应用。
CSS 中!重要规则的使用
在 CSS 中，!important 规则使开发人员能够覆盖样式的级联顺序，并确保所需的特定样式获得最高优先级。
语法
selector{
property: value !important;
}
如果您在 CSS 属性旁边使用 !important 关键字，则编译器将确保将其应用于该元素，无论样式的任何特定顺序如何。让我们看一个例子。
输入
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
示例
在以下示例中，由于 b 位于 a 之前，因此，将根据最后一个 div 元素的 b 应用样式。但是，文本的颜色按照类“a”中的写入方式应用，这意味着文本的颜色为红色。这是因为我们在 “a”类中的 color 属性使用了 !important 关键字。
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
结论
在本文中，我们讨论了级联和特异性规则，用于在将多个类应用于特定元素时指定 CSS 中类的顺序。我们还讨论了用于覆盖任何特异性顺序的!important规则。
以上就是如何使用 CSS 指定类的顺序？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 CSS 指定类的顺序？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
