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. 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I

    原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变 ...

  2. Android零基础入门第34节：Android中基于监听的事件处理

    原文:Android零基础入门第34节:Android中基于监听的事件处理 上一期我们学习了Android中的事件处理,也详细学习了Android中基于监听的事件处理,同时学会了匿名内部类形式,那么本 ...

  3. eclipse 插件编写（四）

    前言 前面几篇文章讲了下如果编写简单的eclipse插件,如创建插件项目.编写右键弹出菜单等功能,接下来主要写一下如何生成代码的功能,这一片的功能跟插件本身的编写关联不太大,主要处理插件之后的业务内容 ...

  4. hMailServer搭建简单邮件系统

    本文介绍的是搭建本地的邮件系统,至于互联网的还在研究之中. 1.需要一个邮件服务器软件,这里用的是hMailServer,其中会让你设置一个密码,记住这个密码,后面连接的时候回用到. 2.添加域名 因 ...

  5. 【Qt】无边框窗体中带有ActiveX组件时的一个BUG

    无意中发现的一个BUG,Qt5.1.1正式版首先创建一个GUI工程,拖入一个QAxWidget控件(为了使ActiveX生效,需要在.pro文件中加入CONFIG += qaxcontainer)接着 ...

  6. Js判断当前浏览者的操作系统

    function validataOS(){ var userAgent = navigator.userAgent; if(userAgent.indexOf('Window')>0){ re ...

  7. jquery测试文档

    Jquery版本:* jQuery JavaScript Library v1.3.2 * http://jquery.com/ 引用:<script src="JS/jquery.j ...

  8. Python连载11-Python中os.path模块简介

    一.os.path(和路径相关的木块) 1.函数:abspath() (1)含义:将路径转化为绝对路径的形式(absolute path) (2)格式:os.path.abspath(相对路径) (3 ...

  9. tar 命令参数解释

    tar 命令 tar [-cxtzjvfpPN]文件与目录参数说明:-c :建立一个打包文件:-x :解开一个打包文件:-t :查看 tar包里面的文件:(特别注意,在选择参数时,c/x/t仅能存在一 ...

  10. 【设计模式】行为型05责任链模式（Chain of responsibility Pattern）

    学习地址:http://www.runoob.com/design-pattern/chain-of-responsibility-pattern.html demo采用了DEBUG级别举例子,理解起 ...