Css权重
权重--很多规则应用到同一个元素上时,权重是决定哪个生效的(优先级)
权重等级与权值
行内样式(1000)>ID选择器(100)>类、属性选择器或伪类选择器(10)>元素和伪元素(1)>*(0)
注:行内样式是在代码内直接写style 例如<div style=" "></div>
权重规则
1.包含更高权重的选择器的一条规则有更高的权重
2.ID选择器(#idValue)的权重比属性选择器([id="idValue"])高
3.带有上下文关系的选择器比单纯的元素选择器权重高
例如:
<section>
<article></article>
</section>
article是section的子元素,带有上下文关系,通过section > article{} 权重为1+1=2,直接article{}权重为1
4.与元素“挨得近”的规则生效---例如行内样式
5.如果两条规则权重相同,后面定义的规则会覆盖前面与之冲突的规则
6.无论多少个元素组成的选择器,都没有一个class选择器权重高
例如 body div section article{} 不如.class名{}权重高
通配符选择器权重是0,被继承的css属性也带有权重,权重也是0

Css3 权重的更多相关文章

  1. css3 选择器 权重问题 (第二部分)

    这篇博文有关css的权重问题,我个人认为这是css知识中很重要的一个知识点.因为在开发的过程能中我们会经常遇到这种问题,特别是如果你使用框架的时候,有些框架的某些标签有一些默认的样式.所以我们可以通过 ...

  2. css3 选择器 权重问题 (第一部分)

    其实我现在写的这些博文笔记都是我很早之前学习的时候所写的笔记,只不过之前是没有写博客的习惯,所以都是写在word文档中个人需要的时候看而已.最近刚刚开了博客,所以想将自己的笔记贴到博客. 但是现在看来 ...

  3. CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  4. css权重计算方法浅谈

    在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...

  5. 转载——CSS3 Object-fit和Object-position

    在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...

  6. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  7. CSS3 04

    animate.css库的使用 官网:https://daneden.github.io/animate.css/ 作用:将一切常见的动画直接封装,开发者不需要考虑实现过程,只需要添加对应的类就能实现 ...

  8. CSS3与页面布局学习笔记(一)——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  9. 总结CSS3新特性(选择器篇)

    CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...

随机推荐

  1. Python基础篇--输入与输出

    站长资讯平台:Python基础篇--输入与输出在任何语言中,输入和输出都是代码最基础的开始,so,先来聊一聊输入和输出输出输入END在任何语言中,输入和输出都是代码最基础的开始,so,先来聊一聊输入和 ...

  2. [Assign the task][dfs序+线段树]

    http://acm.hdu.edu.cn/showproblem.php?pid=3974 Assign the task Time Limit: 15000/5000 MS (Java/Other ...

  3. ELK---- Elasticsearch 安装 学习

    elk  = 分布式系统收集管理多台服务器日志,并能快速做增删改查操作的几个工具集合简称. elasticsearch(存储日志)+logstash(收集日志)+kibana(展示数据) 在linux ...

  4. mysql 数据库练习题

    前面学习了MySQL的语句的基本用法,这里就开始做一些MySQL练习,这套题目一共45题,属于比较简单的,初学先试着做这个. 参考链接:https://www.cnblogs.com/SJP666/p ...

  5. CKEditor5 输入文字时拼音和汉字同时输入问题

    在使用 CKEditor5 + vue 时,出现输入文字时,拼音和文字一起输入到编辑器到问题.与之前项目中使用 ckeditor 的区别是,这次项目是在 python 架构下局部引入 ckeditor ...

  6. controller层直接通过server类调用mapper的通用方法

    自己写的方法没有,但是逆向生成的server类会有继承maybatis-plus的框架 与下图的配置有关

  7. 【概率论】3-8:随机变量函数(Functions of a Random Variable)

    title: [概率论]3-8:随机变量函数(Functions of a Random Variable) categories: Mathematic Probability keywords: ...

  8. 2018CCPCFINAL B Balance of the Force 枚举最大值

    题意 n个人能选择黑暗面和光明面,选择两个面分别能获得\(L_i\)和\(R_i\)的力量,有m对人不能选择同一面,问n个人的力量中的最大值-最小值尽可能小为多少. \(1<=n<=2\t ...

  9. thinphp5.1 使用redis作为缓存

    tp自带的cache类支持redis方式.但是 只有string类型.显然不符合我们的日常的业务需求. so.通过查看源码,发现 handler方法.代码见下图 所以, 这样就能用hash list等 ...

  10. Python学习日记(九)—— 模块二(logging、json&pickle、xml、requests、configparser、shutil、subprocess)

    logging模块 用于便捷记录日志且线程安全的模块(便捷的写文件的模块,不允许多个人同时操作文件) 1.单文件日志 import logging logging.basicConfig(filena ...