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 8 用实例了解布局容器系列-「Grid」

    原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...

  2. Elasticsearch教程(二)java集成Elasticsearch

    1.添加maven <!--tika抽取文件内容 --> <dependency> <groupId>org.apache.tika</groupId> ...

  3. 阻止系统自动睡眠的小软件,附C#制作过程(执行SetThreadExecutionState API函数,让系统误判)

    因为有时下载东西的时候,不想让电脑自动深入睡眠,所以就开启了离开模式.这样不但不节能环保,而且到真正想要睡眠的时候就是一翻蛋疼. 改过自新,关闭了离开模式,同时无操作30分钟后也会进入睡眠模式.但是在 ...

  4. 台电P89s mini root教程

    根据论坛内的一些内容再结合自己的使用心得整理如下,本人双11购入P89s mini root成功  自带软件什么的都不见了 以下是个人root过程,有不一样的地方欢迎交流,说实话我也不是很懂 1.升级 ...

  5. 安装metasploitable3的经验总结

    一个月没有写学习记录了,但是这一个月一直没闲着,抽空写写自己装metasploitable3的经验教训(提示:只要你的环境配置没错,步骤没错,多试几次就会成功了,我总共测试了15次,,短的耗时30分钟 ...

  6. kubernetes实战篇之部署一个.net core微服务项目

    目录 继上一篇kubernetes理论知识完结.本篇主要讲解基于nexus搭建一个docker镜像仓库(当然大家实践过程是不必完全跟着做,也可以搭建harbor仓库或者直接把镜像推送到docker h ...

  7. 高并发 Nginx+Lua OpenResty系列(1)——环境搭建

    OpenResty是一款基于Nginx的高性能负载均衡服务器容器,简单来说是Nginx+Lua.结合了Lua语言来对Nginx进行扩展,使得在Nginx上具有web容器功能. OpenResty运行环 ...

  8. Azkaban学习之路(二)—— Azkaban 3.x 编译及部署

    一.Azkaban 源码编译 1.1 下载并解压 Azkaban 在3.0版本之后就不提供对应的安装包,需要自己下载源码进行编译. 下载所需版本的源码,Azkaban的源码托管在GitHub上,地址为 ...

  9. 【python3两小时快速入门】入门笔记03:简单爬虫+多线程爬虫

    作用,之间将目标网页保存金本地 1.爬虫代码修改自网络,目前运行平稳,博主需要的是精准爬取,数据量并不大,暂未加多线程. 2.分割策略是通过查询条件进行分类,循环启动多条线程. 1.单线程简单爬虫(第 ...

  10. webpack 4.0 版本的简单使用

    webpack 4.0 学习指南 最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4. 但是webpack 3 和webpack 4 二者的使用方式完全不一样 ...