零基础教你学前端——68-CSS选择器的权重
wxin55 2024-11-08 14:41 9 浏览 0 评论
在前面，我们学习了样式表引入的优先级判断。如果多个选择器都来修饰同一个元素，优先级又该如何判断呢？
我们来看一个例子。
<!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>仔细观察一下，h1 元素同时存在内联样式和内部样式的修饰。内部样式的 ID 选择器、通用选择器、类选择器和元素选择器，也都指向了 h1 元素。
多个样式作用于同一个元素，是冲突的，到底哪个优先级更高呢？
现在，标题文本的颜色你一定知道，是紫色。因为内联样式优先级高于内部样式。
如果把内联样式删掉，标题的文本会是什么颜色呢？
我们看，是蓝色！说明这四个选择器，ID 选择器优先级最高。
去掉 ID 选择器，标题变成了绿色！说明这三个选择器，类选择器优先级最高。
再去掉类选择器，标题变成了红色！说明元素选择器优先级高于通用选择器。
最后去掉元素选择器，标题变成了橙色！说明这里通用选择优先级最低。
通过这个例子，我们可以总结一个规律：行内样式优先级大于ID选择器，大于类选择器，大于元素选择器，大于通用选择器。但是，光掌握这个规律还不够，遇到一些更复杂选择器，就比较难判断了。
我们再看一个案例。
<!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>
<p>我觉得能力更重要！</p>
<div class="box">
<p>其实这无非是证明自己价值、或被别人认可的一种方式，从客观的角度来讲，当你大学刚毕业的时候，没有工作经验，那学历肯定是让别人认可你的第一方式。</p>
</div>
<div id="box">
<p>但是如果你工作了三五年，还只能靠学历来证明自己的价值，那我觉得是很失败的。</p>
</div>
</body>
</html>在这个案例中，所有的选择都在针对 p 元素，设定它的文字颜色。很明显这些选择器，它们之间也是冲突的，这个时候浏览器会根据选择器的权重值来判断。
也就是说，当样式发生冲突时，谁的权重值高，谁就生效！那权重值该怎么计算呢？
这里，给你一个表，你只需要记住这 5 个东西，就一劳永逸了。
通用选择器，它的选择范围最大，权重值最小，只有 0。
元素选择器，权重值为 1。
类选择器，权重值是 10。
ID 选择器，权重值是 100。
行内样式，权重值最大，是 1000。
有了这 5 个选择器的权重值，就可以计算任何一个选择器的权重了，优先级也会一目了然。
比如，看这个选择器：井号box，下面的 p 元素，下面的点light。(#box p .light) 这个选择器的权重值有多大呢？
没错，只需要把这三个选择器的权重值相加就可以了。
再对比一下这个选择器（#box .light），很明显的看出来，上边这个选择器的优先级更高。
如果你刚开始接触CSS，计算权重值可能会有一些麻烦。
选择器选择的范围越小，越精确，优先级就越高！
你可以自己把这个秘籍，套用到刚才的两个选择器中验证一下。
再次回到这个例子。
我们可以把这些选择器的权重值都计算出来。
第一个段落，哪个选择器对应它呢？只有第一个匹配了，权重值为 1。此时也没有别的样式冲突。这个段落的文字颜色就是紫色了！
第二个段落，对应它的选择器有三个。这里可以明显的看到，哪一个权重值是最高的，那就是最后一个。所以，这个段落的颜色就是橙色。
第三个段落，对应它的选择器有四个。我们也可以很容易的从权重值中，看到那个选择器的优先级最高。所以，第三个段落的颜色是蓝色。
文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=69
相关推荐
- 黑客工具sqlmap，带你了解什么师sql注入
-
1、sqlmap介绍sqlmap是一款支持MySQL,Oracle,PostgreSQL,MicrosoftSQLServer,MicrosoftAccess,IBMDB2,SQL...
- Web网络安全漏洞分析，SQL注入原理详解
-
本文主要为大家介绍了Web网络安全漏洞分析SQL注入的原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪一、SQL注入的基础1.1介绍SQL注入SQL注入就是指We...
- sql注入、文件上传、文件包含（sql注入数据提交的类型）
-
在owasp年度top10安全问题中，注入高居榜首。SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序，而这些输入大都是SQL语法里的一些组合，通过执行SQL语句进而执行攻击者所要...
- 比较常见类型漏洞讲解(三):SQL注入(一)
-
比较常见类型漏洞讲解（一）比较常见类型漏洞讲解（二）：文件上传这里继续介绍比较容易找到的不同类型的漏洞。演示准备目标主机：Metasploitable2攻击目标：目标主机的dvwa系统攻击机：Kali...
- 警惕SQL注入:检测与防御的实战指南
-
在当今数字化的时代，软件系统的安全性至关重要。SQL注入作为一种常见且危害巨大的安全漏洞，给企业和用户带来了潜在的风险。对于测试人员来说，掌握发现和解决SQL注入漏洞的方法是保障软件质量和安全的...
- SQL注入的原理和危害（sql注入的原理及危害）
-
什么是SQL注入SQL注入是发生在web端的安全漏洞，实现非法操作，欺骗服务器执行非法查询，他的危害有会恶意获取，甚至篡改数据库信息，绕过登录验证，原理是针对程序员编写时的疏忽，通过执行SQL语句，实...
- 科普基础 | 最全的SQL注入总结（sql注入是干嘛的）
-
0x01SQL注入原理当客户端提交的数据未作处理或转义直接带入数据库，就造成了sql注入。攻击者通过构造不同的sql语句来实现对数据库的任意操作。0x02SQL注入的分类按变量类型分：数字型和字符...
- 产品经理必备IT技术知识之“什么是SQL注入攻击?
-
不少优秀的产品经理都会写一些简单的SQL语句进行数据查询的操作，但是会写SQL语句不代表能写好SQL语句。SQL语句写得不好，就会引发SQL注入攻击。SQL注入攻击是Web开发中最常见的一种安全问题，...
- 通过sql注入获取用户名和密码（联通光猫超级用户名超级密码获取）
-
1.啥是sql注入sql注入是一种通过操作输入来修改后台sql语句以达到利用代码进行攻击目的的技术2.生成sql注入漏洞的原因总结一句话:对前台传过来的参数没有进行有效的过滤,太相信前端传过来的参数...
- 什么是SQL注入攻击(SQL Injection)
-
1，定义：在构建数据库SQL语句时，攻击者在参数请求中注入恶意的SQL代码，并在在数据库中执行，操控数据库执行意图之外的操作。2，目的：窃取数据、修改数据、删除数据、绕过身份验证、权限提升，执...
- 浅谈SQL注入（sql注入的理解）
-
在关于SQL注入，百度的解释是这样的：SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知...
- sql注入（sql注入攻击是什么意思）
-
SQL注入分类1.数字型注入当输入的参数为整型时，则有可能存在数字型注入漏洞。假设存在一条URL为：HTTP://www.aaa.com/test.php?id=1可以对后台的SQL语句猜...
- SQL注入详解（sql注入总结）
-
现在大多数系统都使用B/S架构，出于安全考虑需要过滤从页面传递过来的字符。通常，用户可以通过以下接口调用数据库的内容：URL地址栏、登陆界面、留言板、搜索框等。这往往会出现安全隐患，为了更好的保护数据...
- 什么是sql注入，这些坑得避开（什么是sql注入,编程时如何避免）
-
1、sql注入是什么sql注入就是用户通过输入的参数，拼接到原先的sql中，成为sql的一部分，从而影响sql的功能和执行结果2、sql注入破坏力-小兵破坏力比如原先sql如下s...
- 金母鸡量化教学场:pandas—数据挖掘的Python库
-
如果你想充分发挥Python的强大作用，如果你想成为一名好的Python量化师，你应该先学好Pandas。今天就来了解什么是Pandas。与numpy易于处理同种类型数据不同，pandas更加的适合...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)