css的优先级 和 权重问题 以及 !important 优先级

css选择有多少种？

  • 行内样式(style="")
  • id选择器(#)
  • class选择器(类,伪类)
  • 元素选择器(标签元素和伪元素)

css的优先级：行内样式>id选择器>class选择器>元素选择器

!important :表示强制应用该样式,例如: button{width:150px !important;},与以上的选择器相遇时，强制使用此样式;

css选择器的使用，应该尽量避免使用!important和内联样式；id通常也是与class区分开使用，前置多用于js中的节点点位，后者多用于css选择器。

重中之重,真实情况下10个class并不能逆转1个id。案例：张鑫旭的256个class类名选择器干掉一个id选择器实例页面.

内容详情参考：https://www.cnblogs.com/nangezi/p/9042973.html

css的优先级 和 权重问题 以及 !important 优先级的更多相关文章

  1. css的优先级和权重问题 以及!important优先级

    一,前言: 刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题.那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规 ...

  2. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  3. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  4. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  5. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  6. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. css知多少（6）——选择器的优先级（转）

    css知多少(6)——选择器的优先级   1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两 ...

  8. HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

  9. html css的内联样式 内部样式表 外部样式表的优先级

    http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...

随机推荐

  1. 微信小程序把玩（三十六）Storage API

    原文:微信小程序把玩(三十六)Storage API 其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步 异步存储方法: 存数据 wx.setStor ...

  2. FMX中实现PostMessage的方法

    首先,做为一个从Windows下转过来的开发人员,许多时候,我们喜欢用PostMessage来触发一些异步执行的代码,但遗憾的是,FMX做为EMB的跨平台库的基础,只提供了SendMessage方法, ...

  3. C++与QML混合编程实现2048

    http://blog.csdn.net/ieearth/article/details/42705305

  4. Postman调试中文出现乱码问题

    最近在通过postman调试接口的时候,发现post的数据在中文的时候,传输到后台变成了问号(???),经过网上的资料与验证,找到了解决方案:在请求头中添加charset=UTF-8的属性,后续在进行 ...

  5. Spectre小计

    今天安装了vs2017,而后又安装了wdk,随便写了一个控制台测试程序,居然报错.网上也查了一圈,也没有得到解决.报错内容如下: MSB8038:已启用Spectre缓解,但找不到Spectre缓解库 ...

  6. ABP开发框架前后端开发系列---（7）系统审计日志和登录日志的管理

    我们了解ABP框架内部自动记录审计日志和登录日志的,但是这些信息只是在相关的内部接口里面进行记录,并没有一个管理界面供我们了解,但是其系统数据库记录了这些数据信息,我们可以为它们设计一个查看和导出这些 ...

  7. python trojan development 3rd —— use python to creative a simple shell

    前两篇文章的木马太被动,今天是通过socket和os来进行主动木马编写 有些s13,我真的搞不懂拿一些没过脑子的代码就放到网上去害人,骗流量,还某知名安全企业学院写的,真的服.我的代码自己运行过,很稳 ...

  8. 简单看看java之枚举

    枚举类这个类用的比较少,对这个不怎么熟悉,最近看源码刚好可以好好了解一下,那么,枚举Enum是什么呢?在jdk中,Enum是一个抽象类下图所示,这就说明这个类是不能进行实例化的,那么我们应该怎么使用呢 ...

  9. Electron为文件浏览器创建图标(三)

    在前面的文章中,请看之前文章,我们已经完成了使用 electron做文件浏览器这么一个应用,现在我们需要为应用创建图标操作.为应用创建图标以后,我们就可以从计算机中与其他应用区分开来,如果我们自己会做 ...

  10. Spring注解之-自定义注解

    1.自定义注解,先自定义三个水果属性的注解 元注解: java.lang.annotation提供了四种元注解,专门注解其他的注解(在自定义注解的时候,需要使用到元注解):   @Documented ...