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. uwp之拍照（使用后置摄像头）

    参考:wp8.1之拍照(获取焦点,使用后置摄像头) uwp开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多 ...

  2. spring.net的简单使用（一）入门

    Spring.net是一个非常强大的框架和工具,下面是百度百科对它的介绍. Spring.NET为建立企业级应用提供了一套轻量级的解决方案.通过Spring.NET,我们可以用统一且透明的方式来配置应 ...

  3. Qt 下快速读写Excel指南（尘中远）

    Qt Windows 下快速读写Excel指南 很多人搜如何读写excel都会看到用QAxObject来进行操作,很多人试了之后都会发现一个问题,就是慢,非常缓慢!因此很多人得出结论是QAxObjec ...

  4. ASP.NET Core 下自定义模型绑定，去除字符串类型前后的空格

    效果图: 01 02 直接贴代码了: NoTrim public class NoTrimAttribute : Attribute { } 我们自定义的模型绑定提供程序 /// <summar ...

  5. 在Mac OSX下使用ssh建立隧道（在Windows下建立隧道可以使用putty，其间会用到ppk文件）

    在Windows下建立隧道可以使用putty,其间会用到ppk文件.在Mac OSX下,同样的功能可以用ssh命令实现.具体是: ssh -D 8088 -Nf user@ip -i myppk.ss ...

  6. Linux中$的特殊用法

     一:变量说明:($表示在执行命令的一些参数)   (!)    $!      #Shell最后运行的后台Process的PID  (2)    $?      #最后运行的命令的结束代码(返回值) ...

  7. redis连接错误3种解决方案System Error MISCONF Redis is configured to save RDB snapshots

    redis连接错误System Error MISCONF Redis is configured to save RDB snapshots, but XX   情况1解决办法: 由于强制停止red ...

  8. spring 5.x 系列第11篇 —— 整合memcached (xml配置方式)

    文章目录 一.说明 1.1 XMemcached客户端说明 1.2 项目结构说明 1.3 依赖说明 二.spring 整合 memcached 2.1 单机配置 2.2 集群配置 2.3 存储基本类型 ...

  9. composer简述

    1.composer是一个php依赖管理工具,而不是一个包管理器.怎么来理解呢?就像在是在电脑中安装了个电脑管家,在电脑管家的软件管理中下载和更新软件,其实这个电脑管家只是一个管理工具,而真正的软件可 ...

  10. X-Admin&ABP框架开发-数据字典

    在业务型的系统开发中,我们需要维护各种个样的类型,比如客户类型.客户行业.商品类型等等,这些类型往往信息量不多,并且相似度极高,如果采用一类型一表去设计,将会造成极大的工作量,通过将这部分类型的信息进 ...