关系图

图片出处我找不到了。

结论

权重从高到低排序

1. !important

2. style

3. #id

4. .class .child-class

5. .class1.class2

6. .class 与 [ATTR] 并列

7. element child-element

8. element

9. *

并且注意第6点，类、伪类、属性选择器权重一致。

CSS 权重图的更多相关文章

  1. css 权重值(层叠性)详解

    目录 css权重值(重叠性)实例 权重值的计算 !important 提升权重值实例 什么情况下可以使用!important ? 总结: css权重值(重叠性)实例 css中有很多选择器,那在多个选择 ...

  2. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  3. HTML/CSS权值继承

    <style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/ span{color:pi ...

  4. 补充拓展：CSS权重值叠加

    都知道CSS选择器有权重优先级,权重大的优先展示. 但部分人可能不清楚,权重值也是可以叠加计算的 <!DOCTYPE html> <html> <head> < ...

  5. css权值和优先级+命名规范

    选择器权值: 标签选择器:1 类选择器和伪类选择器:10 ID选择器:100 通配符选择器:0 行内样式:1000 !important 在一定条件下,优先级最高 常用的css样式命名 页面结构页头: ...

  6. css权值计算

    外部样式表<内部样式表<内联样式: HTML 标签选择器的权值为 1: Class 类选择器的权值为 10: ID 选择器的权值为 100: 内联样式表的权值最高 1000: !impor ...

  7. CSS权值

    选择器权值 标签选择器:权值为1 类选择器和伪类:权值为10 ID选择器:权值为100 通配符选择器:权值为0 行内样式:权值为1000 !important规则: 可调整样式规则的优先级 添加在样式 ...

  8. css权值问题

    继承是没有权值的,比通配符的的权值0还要低. 选择器是不分上下级的.只管优先级. 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为0 ...

  9. CSS权值比较(读书笔记)

    1.继承0.1    标签1    类选择符10    ID选择符100 2.层叠:后面的样式会覆盖前面的样式. 3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外 ...

随机推荐

  1. python数据类型：元组

    python数据类型:元组 python的元组与列表类似,但是元组的元素不能修改 元组使用小括号,列表使用大括号 元组创建简单,只需要在括号中添加元素,使用逗号隔开 创建元组: tup1 = (50, ...

  2. 利用Python进行图片发送与接收的两种方法---包含客户端和服务器端代码

    第一种方法 opencv.requests.flask 此方法比较耗费时间 600毫秒左右 客户端代码 #coding:utf-8 import cv2 import json import requ ...

  3. PCIe的事务传输层的处理（TLP）

    主要从以下几个方面解决: 1.TLP基本的概念: 2.寻址定位与路由导向 3.请求和响应机制 4.虚拟通道机制 5.数据完整性 6.i/o,memory,configuration,message r ...

  4. LeetCode Day 5

    LeetCode0005 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab& ...

  5. bootstrap 和datapicker 样式不兼容修复

    修改 datepicker.js内的 layout 方法 function(el) { var options = $(el).data('datepicker'); var cal = $('#' ...

  6. php--小数点问题

    1.用round去小数点后两位时,有时候会出现很长的小数解决方法 sprintf("%.2f",round($total_fee,2)); 使用sprintf再截取一遍.出现变态小 ...

  7. 《JavaScript算法》二分查找的思路与代码实现

    二分查找的思路 首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步. 如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半 ...

  8. java连接sqlserver数据简单操作

    首先我们下载微软的JDBC驱动包 https://www.microsoft.com/en-us/download/details.aspx?id=11774 下载好后我们打开如下图 点击Unzip ...

  9. 引入 JPEGCodec;JPEGImageEncoder; 图片处理;MyEclipse编译时报错处理

    在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JP ...

  10. Python之路购物车

    #coding:utf-8 wages=raw_input('what are your wages:') lise_commodity=[('apples',50),('orange',55),(' ...