CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器),

属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等。

在CSS中,权重决定了哪些CSS规则生效,浏览器按如下规则进行CSS权重计算

  • 1000:内联样式

  • 0100:ID选择器

  • 0010:类,伪类,属性选择器

  • 0001:元素,伪元素,通配符,子选择器,相邻选择器等

  • 无:继承样式

​浏览器通过对元素上的CSS规则进行权重计算,权重高的规则将生效,如果权重相同则最后的规则生效,

而使用的important的规则将具备最高权重,如果多条规则有important,同样是最后的规则生效。

css系列,选择器权重计算方式的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. CSS 选择器权重计算规则

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  3. CSS 选择器权重计算规则(转)

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  4. CSS选择器权重计算

    CSS各种选择器的权重: 1.ID选择器  +100 2.类.属性.伪类选择器   +10 3.元素.伪元素选择器   +1 4.其他选择器   +0 如果有两个CSS样式都作用于某元素,如: #id ...

  5. CSS 导入-选择器-权重

    CSS 导入-选择器 Cascading Style Sheets 层叠样式表 它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言 CSS语法结构 选择器 声明{} 属性名:属性值 c ...

  6. 浏览器+css基础+选择器+权重+匹配规则

    浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...

  7. CSS系列------选择器和选择器的优先级

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

  8. CSS选择器权重计算规则

    从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...

  9. 对CSS了解-选择器权重

    <style type="text/css"> div.ui_infor p {font-size: 16px;} .ui_infor p {font-size: 14 ...

随机推荐

  1. hdu 5092 Seam Carving (简单数塔DP,题没读懂,,不过可以分析样例)

    题意: 给一个m*n的矩阵,每格上有一个数. 找从第1行到第m行的一条路径,使得这条路径上的数之和最小. 路径必须满足相邻两行所选的两个数的纵坐标相邻(即一个格子必须是另一个格子的周围八个格子中的一个 ...

  2. 从0到1搭建自己的组件(vue-code-view)库(下)

    0x00 前言 书接上文,本文将从源码功能方面讲解下 vue-code-view 组件核心逻辑,您可以了解以下内容: 动态组件的使用. codeMirror插件的使用. 单文件组件(SFC,singl ...

  3. mysql查询表名和列名字

    -- 登录yellowcong 数据库 mysql -uroot -proot yellowcong -- 查看当前数据库 select database() -- 查看数据库里面的表 --table ...

  4. spring security之 默认登录页源码跟踪

    spring security之 默认登录页源码跟踪 ​ 2021年的最后2个月,立个flag,要把Spring Security和Spring Security OAuth2的应用及主流程源码研究透 ...

  5. Ubuntu安装BCC

    Ubuntu安装BCC 教程 官方文档 安装 这里官方文档中首先讲到的是二进制文件的安装,直接通过apt进行安装 sudo apt-get install bpfcc-tools linux-head ...

  6. eclipse查看jar包源代码

    方法一:将jd-gui集成在Eclipse中 https://jingyan.baidu.com/article/b24f6c8275536686bfe5daed.html    下载2个反编译文件, ...

  7. oracle 与 前台 md5

    创建函数: CREATE OR REPLACE FUNCTION MD5( passwd IN VARCHAR2) RETURN VARCHAR2 IS retval varchar2(32); BE ...

  8. 在CentOS(Linux)下用TomCat部署完java项目后,在Windows下可以访问8080,但无法通过输入页面名.jsp进入页面

    错误描述:今天第一次在linux下部署项目,写了个测试的项目,在CentOS下放行8080端口后,在Windows下可以访问8080,出现TomCat的欢迎页面,但想要进入某一个静态的jsp页面显示找 ...

  9. Nginx server_name翻译

    http://nginx.org/en/docs/http/server_names.html#regex_names 匹配优先顺序 精确名称,无通配符,无正则. 以星号开头的最长的通配符名称,例如& ...

  10. X-MagicBox-820的luatOS之路连载系列4

    上次说到定位成功后,显示的数据准确性问题.专门查询了下我所在地区的经纬度信息. MagicBox的显示数据是这样的: 网络上查到的经纬度数据是这样的: 可以看出定位精度还可以,毕竟我这个查询的数据没有 ...