CSS各种选择器的权重:

1.ID选择器  +100

2.类、属性、伪类选择器   +10

3.元素、伪元素选择器   +1

4.其他选择器   +0

如果有两个CSS样式都作用于某元素,如:

#id .link a[href] ----- #id(100) + .link(10) +a(1) + [href](0) = 111

#id .link.active  ----- #id(100) + .link(10) + .active(10) = 120

显然,下面的权重比上面的高,那么如果有相同的样式属性,下面的会覆盖掉上面的

需要注意的是,如果有:

#id

.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11

即使下面的算出来的值要比上面的大,但是上面的优先级依然比下面的高

补充:

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

  5. css系列,选择器权重计算方式

    CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...

  6. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  7. CSS选择器优先级计算

    优先级从高到低排列,浏览器优先满足前面的规则 1,!important优先级最高 2,内联样式 3,作者>读者>浏览器 4,优先级权重加法 id选择器+100/个 类/伪类选择器+10/个 ...

  8. css选择器权重问题

    important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0

  9. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

随机推荐

  1. 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  2. 电脑浅色显示器不显示怎么办,如何用PS去除logo底色

    本人买了新电脑后,虽然电脑显示器颜色也不错,就是刚买回来提示个true color没正确安装,我也没在意,因为感觉电脑显示方面还是不错的,后来定做安装程序用logo图的时候,有个浅色背景色,自己没看出 ...

  3. Python学习之路——函数的参数分类

    今日内容 '''实参:调用函数,在括号内传入的实际值,值可以为常量.变量.表达式或三者的组合​*****形参:定义函数,在括号内声明的变量名,用来接受外界传来的值​'''​'''注:形参随着函数的调用 ...

  4. hdu 5536 Chip Factory (01 Trie)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5536 题面; Chip Factory Time Limit: 18000/9000 MS (Java/O ...

  5. 爬虫,基于request,bs4 的简单实例整合

    简单爬虫示例 爬取抽屉,以及自动登陆抽屉点赞 先查看首页拿到cookie,然后登陆要携带首页拿到的 cookie 才可以通过验证 """""" ...

  6. Ubuntu和Windows双系统的安装

    本菜鸡的ACM生涯大概是结束了 最有希望的EC和焦作也顺利的铁了,一路走来还是怪自己不努力,整日整日的划水,算了,铁牌退役,也是自己应有的惩罚,静下心来吧 下面介绍如何装windows10和Ubunt ...

  7. 用Spring构建企业Java应用程序的方法

    https://mp.weixin.qq.com/s?__biz=MzU0MDEwMjgwNA==&mid=2247484965&idx=1&sn=ca6b847c65e506 ...

  8. Python并发编程之同步\异步and阻塞\非阻塞

    一.什么是进程 进程: 正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 进程和程序的区别: 程序仅仅只是一堆代码而已,而进程指的是程序的运行过程. 需要强调的是:同一个程序执行两次,那也 ...

  9. C# 操作SQL Server 公共库

    基本够用,存一下,以后找起来方便 public abstract class DB { //数据库连接字符串(config来配置) protected static string connection ...

  10. qml : qml控件自适应;

    import QtQuick 2.4 Item { property var targetItem: parent property bool fixedAspectRatio: true // El ...