css系列,选择器权重计算方式
CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器),
属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等。
在CSS中,权重决定了哪些CSS规则生效,浏览器按如下规则进行CSS权重计算
1000:内联样式
0100:ID选择器
0010:类,伪类,属性选择器
0001:元素,伪元素,通配符,子选择器,相邻选择器等
无:继承样式
浏览器通过对元素上的CSS规则进行权重计算,权重高的规则将生效,如果权重相同则最后的规则生效,
而使用的important的规则将具备最高权重,如果多条规则有important,同样是最后的规则生效。
css系列,选择器权重计算方式的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS 选择器权重计算规则(转)
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS选择器权重计算
CSS各种选择器的权重: 1.ID选择器 +100 2.类.属性.伪类选择器 +10 3.元素.伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id ...
- CSS 导入-选择器-权重
CSS 导入-选择器 Cascading Style Sheets 层叠样式表 它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言 CSS语法结构 选择器 声明{} 属性名:属性值 c ...
- 浏览器+css基础+选择器+权重+匹配规则
浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- CSS选择器权重计算规则
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...
- 对CSS了解-选择器权重
<style type="text/css"> div.ui_infor p {font-size: 16px;} .ui_infor p {font-size: 14 ...
随机推荐
- hdu 5092 Seam Carving (简单数塔DP,题没读懂,,不过可以分析样例)
题意: 给一个m*n的矩阵,每格上有一个数. 找从第1行到第m行的一条路径,使得这条路径上的数之和最小. 路径必须满足相邻两行所选的两个数的纵坐标相邻(即一个格子必须是另一个格子的周围八个格子中的一个 ...
- 从0到1搭建自己的组件(vue-code-view)库(下)
0x00 前言 书接上文,本文将从源码功能方面讲解下 vue-code-view 组件核心逻辑,您可以了解以下内容: 动态组件的使用. codeMirror插件的使用. 单文件组件(SFC,singl ...
- mysql查询表名和列名字
-- 登录yellowcong 数据库 mysql -uroot -proot yellowcong -- 查看当前数据库 select database() -- 查看数据库里面的表 --table ...
- spring security之 默认登录页源码跟踪
spring security之 默认登录页源码跟踪 2021年的最后2个月,立个flag,要把Spring Security和Spring Security OAuth2的应用及主流程源码研究透 ...
- Ubuntu安装BCC
Ubuntu安装BCC 教程 官方文档 安装 这里官方文档中首先讲到的是二进制文件的安装,直接通过apt进行安装 sudo apt-get install bpfcc-tools linux-head ...
- eclipse查看jar包源代码
方法一:将jd-gui集成在Eclipse中 https://jingyan.baidu.com/article/b24f6c8275536686bfe5daed.html 下载2个反编译文件, ...
- oracle 与 前台 md5
创建函数: CREATE OR REPLACE FUNCTION MD5( passwd IN VARCHAR2) RETURN VARCHAR2 IS retval varchar2(32); BE ...
- 在CentOS(Linux)下用TomCat部署完java项目后,在Windows下可以访问8080,但无法通过输入页面名.jsp进入页面
错误描述:今天第一次在linux下部署项目,写了个测试的项目,在CentOS下放行8080端口后,在Windows下可以访问8080,出现TomCat的欢迎页面,但想要进入某一个静态的jsp页面显示找 ...
- Nginx server_name翻译
http://nginx.org/en/docs/http/server_names.html#regex_names 匹配优先顺序 精确名称,无通配符,无正则. 以星号开头的最长的通配符名称,例如& ...
- X-MagicBox-820的luatOS之路连载系列4
上次说到定位成功后,显示的数据准确性问题.专门查询了下我所在地区的经纬度信息. MagicBox的显示数据是这样的: 网络上查到的经纬度数据是这样的: 可以看出定位精度还可以,毕竟我这个查询的数据没有 ...