零基本教你学前端——68-CSS选取器的权重-天涯论坛

1fy07h 发表于 2024-6-30 06:48:32

零基本教你学前端——68-CSS选取器的权重

在前面，咱们学习了样式表引入的优先级判断。倘若多个选取器都来修饰同一个元素，优先级又该怎样判断呢？
咱们来看一个例子。
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CSS选取器权重——一个例子</title>
 <style>
 #h-one {
 color: blue
 }

 * {
 color: orange
 }

 .header {
 color: green
 }

 h1 {
 color: red
 }
 </style>
 </head>
 <body>
 <h1 class="header" id="h-one" style="color: purple">
 学历和能力哪个更要紧？
 </h1>
 </body>
 </html></div>
仔细观察一下，h1 元素同期存在内联样式和内部样式的修饰。内部样式的 ID 选取器、通用选取器、类选取器和元素选取器，亦都指向了 h1 元素。
多个样式功效于同一个元素，是冲突的，到底哪个优先级更高呢？
此刻，标题文本的颜色你必定晓得，是紫色。由于内联样式优先级高于内部样式。
倘若把内联样式删掉，标题的文本会是什么颜色呢？
咱们看，是蓝色！说明这四个选取器，ID 选取器优先级最高。
去掉 ID 选取器，标题变成为了绿色！说明这三个选取器，类选取器优先级最高。
再去掉类选取器，标题变成为了红色！说明元素选取器优先级高于通用选取器。
最后去掉元素选取器，标题变成为了橙色！说明这儿通用选取优先级最低。
经过这个例子，咱们能够总结一个规律：行内样式优先级大于ID选取器，大于类选取器，大于元素选取器，大于通用选取器。然则，光把握这个规律还不足，遇到有些更繁杂选取器，就比较难判断了。
咱们再看一个案例。
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CSS选取器权重——第二个例子</title>
 <style>
 p { /* 1 */
 color: purple;
 }

 div p { /* 1 + 1 = 2 */
 color: green;
 }

 .box p { /* 10 + 1 = 11 */
 color: orange;
 }

 #box p { /* 100 + 1 = 101 */
 color: red;
 }

 div#box p { /* 1 + 100 + 1 = 102 */
 color: blue;
 }
 </style>
 </head>
 <body>
 我觉得能力更要紧！
 <div class="box">
 其实这没非是证明自己价值、或被别人认可的一种方式，从客观的方向来讲，当你大学刚毕业的时候，无工作经验，那学历肯定是让别人认可你的第1方式。
 </div>
 <div id="box">
 <p</div>

啊呀呀 发表于 2024-9-3 23:34:55

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。

nykek5i 发表于 2024-9-27 16:35:11

对于这个问题，我有不同的看法...

nqkk58 发表于 2024-10-9 10:12:35

你的见解真是独到，让我受益匪浅。

1fy07h 发表于 2024-10-24 22:28:34

我深受你的启发，你的话语是我前进的动力。

nqkk58 发表于 2024-10-25 12:13:00

你的努力一定会被看见，相信自己，加油。

4lqedz 发表于 2024-10-28 05:50:37

百度seo优化论坛 http://www.fok120.com/

wrjc1hod 发表于 2024-10-29 19:33:15

感谢你的精彩评论，带给我新的思考角度。

1fy07h 发表于前天 07:30

系统提示我验证码错误1500次＼~゛，

页: [1]

天涯论坛's Archiver

零基本教你学前端——68-CSS选取器的权重