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. cf17B Hierarchy（额，，，水）

    题意: Nick's company employed n people. Now Nick needs to build a tree hierarchy of «supervisor-surbod ...

  2. jquery 实现 <imput>标签 密码框显示/隐藏密码功能

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  3. python解释器的下载与安装

    python解释器 1. 什么是python解释器 用一种能让电脑听的懂得语言,使得电脑可以听从人们的指令去进行工作(翻译官) Python解释器本身也是个程序, 它是解释执行Python代码的,所以 ...

  4. Tomcat 内存马（一）Listener型

    一.Tomcat介绍 Tomcat的主要功能 tomcat作为一个 Web 服务器,实现了两个非常核心的功能: Http 服务器功能:进行 Socket 通信(基于 TCP/IP),解析 HTTP 报 ...

  5. 对于multitaper多窗口谱估计的理解及步骤 (对应matlab中pmtm函数）谱减法相关

    对于多窗口谱估计的理解 目录 对于多窗口谱估计的理解 0. 缘起 1. PMTM 含义 2. 与我们常用的周期谱估计的区别 3. 计算过程 5. 多窗/单窗谱估计结果对比 6. 程序如何生成多窗 - ...

  6. java:字符串与数字的转换

    各种数字类型转换成字符串型 int i =8; String s =Integer.toString(i);// String g =String.valueOf(i); // 其中 value 为任 ...

  7. [atARC126F]Affine Sort

    记$g(k)$为$c$恰为$k$的合法三元组数,显然$f(k)=\sum_{i=1}^{k}g(i)$ 结论:若$\lim_{k\rightarrow \infty}\frac{g(k)}{k^{2} ...

  8. [atARC123F]Insert Addition

    前置知识 下面,先来介绍一下Stern-Brocot Tree的结构: 其是一棵满二叉树,每一个节点都是一个最简分数,其中根为$\frac{1}{1}$ 假设前$i$层的中序遍历分数依次为$\frac ...

  9. [atAGC049F]Happy Sequence

    定义$L=2\cdot 10^{5}$,$g(x)=\sum_{i=1}^{n}|b_{i}-x|-|a_{i}-x|$,则合法当且仅当$\forall 0\le x\le L,g(x)\ge 0$, ...

  10. [atARC105F]Lights Out on Connected Graph

    记$G[S]$表示图$G$在点集$S$上的导出子图,即$G[S]=(S,{(x,y)|x,y\in S且(x,y)\in E})$ 定义$g(S)$为所有$E'$(满足$E'\subseteq G[S ...