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. C#写TXT文档

    //C#写TXT文档 String strDir = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAs ...

  2. Screenshot 库和Collections 库

    一.screenShot 是 robot framework的标准类库,用于截取当前窗口,需要手动加载. 示例: 运行结果: 二.Collections 库 Collections 库同样为 Robo ...

  3. Firefox火狐浏览器提示您的链接并不安全（解决办法）

    火狐浏览器不管访问什么,一直提示连接不安全 解决办法: 1.在Firefox地址栏输入"about:config",回车,进入如下图页面 点击"我了解此风险" ...

  4. Cookie、Session、localStorage、sessionStorage区别和用法

    Cookie 在学习一个新知识点前,我们应该明白自己的学习目标,要带着疑问去学习,该小节须要了解 Cookies 什么是cookie,cookie的作用 cookie的工作机制,即cookie是运作流 ...

  5. let that = this用法解析

    这种情况就是在一个代码片段里this有可能代表不同的对象,而编码者希望this代表最初的对象

  6. VLAN实验

    VLAN实验 如图所示:图中共有四个广播域,左边逻辑的分为两个广播域,右边也是逻辑的分为两个广播域, 配置顺序先配置交换机,在配置路由器 SW1 配置: 1.首先创建vlan [sw1]vlan ba ...

  7. 动手写一个简单的Web框架（Werkzeug路由问题）

    动手写一个简单的Web框架(Werkzeug路由问题) 继承上一篇博客,实现了HelloWorld,但是这并不是一个Web框架,只是自己手写的一个程序,别人是无法通过自己定义路由和返回文本,来使用的, ...

  8. Python | Python常用函数、方法示例总结（API）

    目录 前言 1. 运算相关 2. Sring与数字 3. 列表相关 4. 集合相关 5. 序列化类型 6. 字典相关 7. 输入输出 8. 文件相关 9. json模块 10. unittest测试模 ...

  9. python-内置函数（搭配lambda使用）

    目录 常用的内置函数 需要注意的知识点: enumerate()函数 map()函数 zip()函数 filter()函数 reduce()函数 sum()函数 max()/ min()函数 sort ...

  10. [atARC112F]Die Siedler

    1和2操作是独立的,换言之一定可以先执行1操作选择包裹,再执行2操作使得$0\le c_{i}<2i$ 对于$c_{i}$,将其看作一个进制转换,并以$c_{i}$为从低到高的第$i$位,系数即 ...