【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

一、CSS 优先级

1、优先级引入

定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 ,

  • 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ;
    	<style>div {color: red;font-size: 30px;}div {color: blue;}</style>
    

  • 如果 CSS 选择器 不同 , 则需要考虑 CSS 优先级 问题 , 需要计算对应的 选择器 权重 ;

2、选择器基本权重 

 

  • 继承父类样式 选择器 , 权重 0,0,0,0 ;
    		/* 0. 继承父类样式 权重 0,0,0,0 */body {color: red;}
    

  • 通配符选择器 * , 权重 0,0,0,0 ;
    		/* 0. 通配符选择器 权重 0,0,0,0 */* {color: red;}
    

  • 标签选择器 , 权重 0,0,0,1 ;
    		/* 1. 标签选择器 权重 0,0,0,1 */div {color: pink}
    

 

  • 类选择器 , 权重 0,0,1,0 ;
    		/* 2. 类选择器 权重 0,0,1,0 */.one {color: blue;}
    

  • ID 选择器 , 权重 0,1,0,0 ;
    		/* 3. ID 选择器 权重 0,1,0,0 */#two {color: green;}
    

  • 行内样式表 , 权重 1,0,0,0 ;
    	/* 4. 行内样式表 权重 1,0,0,0 */<div class="one" id="two" style="color: purple;"> 选择器权重 </div>
    

  • 任何选择器中 样式后 添加 !important 权重会被提升为无穷大 , 即使在最低级的 标签选择器样式后添加 !important , 其样式的权重也会被强行提高到最高级 , 权重无穷大 ;
    		/* 5. 任何选择器中 样式后 添加 !important 权重最高 */div {color: pink!important;}
    

    3、完整代码示例

     

    完整代码示例 :

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Document</title><style>/* 0. 继承父类样式 权重 0,0,0,0 */body {color: red;}/* 0. 通配符选择器 权重 0,0,0,0 */* {color: red;}/* 1. 标签选择器 权重 0,0,0,1 */div {color: pink}/* 2. 类选择器 权重 0,0,1,0 */.one {color: blue;}/* 3. ID 选择器 权重 0,1,0,0 */#two {color: green;}/* 4. 行内样式表 权重 1,0,0,0 *//* 5. 任何选择器中 样式后 添加 !important 权重最高 */div {color: pink!important;}</style>
    </head>
    <body>/* 4. 行内样式表 权重 1,0,0,0 */<div class="one" id="two" style="color: purple;"> 选择器权重 </div>
    </body>
    </html>
    

    展示效果 : 最终展示的效果是 color: pink!important; 效果 , 其权重无穷大 ;

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/93925.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react17:生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…

无涯教程-Android - Frame Layout函数

Frame Layout 旨在遮挡屏幕上的某个区域以显示单个项目&#xff0c;通常&#xff0c;应使用FrameLayout来保存单个子视图&#xff0c;因为在子视图彼此不重叠的情况下&#xff0c;难以以可扩展到不同屏幕尺寸的方式组织子视图。 不过&#xff0c;您可以使用android:layout_grav…

Mybatis学习|基本的crud、数据库字段与对照类字段不一致问题

1.查询&#xff1a;根据id去查用户 在Dao层的UserMapper接口中增加根据id查用户的方法&#xff0c;定义方法名、传的参数以及返回值 在与UserMapper接口绑定的UserMapper.xml中配置该方法对应的sql语句 编写测试用例 2.增加&#xff1a;插入一个新用户 在Dao层的UserMapper接…

统一使用某一个包管理工具,比如yarn pnpm

原因&#xff1a;前端每个人的习性不一样&#xff0c;有人用npm 有人用yarn等包管理工具&#xff0c;混合下载插件容易出bug&#xff0c;就用个小工具锁住就行了&#xff0c;只能使用yarn或者pnpm反向下载依赖和下载插件。不然就报错 1.在项目主目录下创建preinstall.js // 如…

关于两个不同数据库的两张表建立数据库链接,关联查询数据

一、数据库链接 数据库链接&#xff08;database link&#xff09;是用于跨不同数据库之间进行连接和数据传输的工具或方法。它允许在一个数据库中访问另一个数据库中的对象和数据。 二、具体操作 以Oracle数据库为例 --1.建立链接tjpt CREATE DATABASE LINK tjpt CONNECT…

vscode远程调试PHP代码

目录 一、VScode配置 1.1安装vscode里面的两个扩展 1.2安装对应PHP版本的xdebug 二、ssh连接和xdebug配置 2.1ssh连接 2.2xdebug配置 三、xdebug调试&#xff0c;访问 一、VScode配置 1.1安装vscode里面的两个扩展 1.2安装对应PHP版本的xdebug 去xdebug官方&#xff0c…

机器学习:无监督学习

文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心&#xff0c;然后计算每个点与中心的距离&#xff0c;找最近的&#xff0c;然后更新中…

Flutter开发- iOS 问题CocoaPods not installed or not in valid state

解决问题方案&#xff1a; 1、先检查本机CocoaPods是否安装&#xff0c;通过gem list 查看是否安装 打开终端&#xff0c;执行gem list&#xff0c;出现图中的数据即为已安装。未安装看第4 步 2、已经安装了CocoaPods&#xff0c;还出现了图中的提示&#xff0c;你可能已经猜…

Springboot整合logback多节点日志文件加端口号区分

描述&#xff1a;正常情况下&#xff1a;在Springboot 项目的resources目录下创建一个logback-spring.xml的日志配置文件&#xff0c;简单配置如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?><configuration debug"false"&g…

用Rust打印hello world!

步骤1 桌面新建1个名为 rustDemo 的文件夹&#xff08;文件夹名字随便取&#xff09; 步骤2 打开新建的文件夹&#xff0c;在地址输入栏输入 cmd 按回车键进入命令行窗口 步骤3 打开编译器&#xff0c;按 Ctrl S&#xff0c;保存文件到 rustDemo 文件夹中&#xff0c;保存的…

自动化运维工具——ansible安装及模块介绍

目录 一、ansible——自动化运维工具 1.1 Ansible 自动运维工具特点 1.2 Ansible 运维工具原理 二、安装ansible 三、ansible命令模块 3.1 command模块 3.2 shell模块 3.3 cron模块 3.4 user模块 3.5 group 模块 3.6 copy模块 3.7 file模块 3.8 ping模…

c++ opencv将彩色图像按连通域区分

要将彩色图像按连通域区分&#xff0c;您可以使用 OpenCV 中的 cv::connectedComponents 函数。 下面是一个简单的示例代码&#xff0c;说明如何使用 cv::connectedComponents 函数来检测并标记图像中的连通域&#xff1a; #include <opencv2/opencv.hpp> #include <…