【CSS】css特殊性-优先级-权重

注:文章来源:《css权威指南》 第三章。 部分未予记录

css选择器可以用多种方式去选择元素,实际上一个元素可以由使用两个或者多个规则来匹配,每个规则都有各自的选择器。请看例子

CSS:
    h1 {color: red;}body h1 {color: green;}h2.grade {color: purple;}h2 {color: silver}然后是特别长的一个选择器html > body table tr[id="totals"] td ul > li {color: marron}li#answer {color: lightblue}
各自的效果:

这是h1标签下的内容

这是h2标签下的内容

  • li的Content

这时候你可以根据样式定义去查看上面的效果 这时候,就引出一个话题,css特殊性(权重),大白话就是根据某一种规则,谁的优先级高谁就能够决定选中元素的样式显示。
但是这并不是解决冲突的全部,实际上所有样式冲突的解决都有层叠来决定(后续)。

选择器的特殊性是由选择器本身的构成[css权威指南写作组件]来确定,特殊值由四个组成部分,如 0,0,0,0,一个选择器的具体特殊性或者权重的计算 如下:

  • 对于选择器中给定的各个ID属性值,加 0, 1, 0, 0 
    -----什么意思 就比如说上面的例子: li#answer 就符合规则, li[id="answer"] 不符合规则
  • 对于选择其中给定的各个 类属性值,属性选择 或者 伪类, 加 0, 0, 1, 0
    -----还是拿上面的例子: tr[id="totals"] 符合了属性选择 这一项 ; 类属性值长这样 selector.className ; 伪类自行脑补
  • 对于选择器中给定的 各个元素 和 伪元素, 加 0,0,0,1 
    -----依旧使用上面的例子: html > body table tr[id="totals"] td ul > li {color: marron} 一共7个元素,并且没有伪元素,所以符合规则,加 0, 0, 0, 7
  • 最后一点:结合符和通配选择器 对特殊性没有任何效果。 
    ----- + > 以及* 对特殊性没有作用

这时候我们来计算上面的几个的选择器的权重值

    h1 {color: red;}          0, 0, 0, 1body h1 {color: green;}   0, 0, 0, 2h2.grade {color: purple;} 0, 0, 1, 1 h2 {color: silver}        0, 0, 0, 1然后是特别长的一个选择器html > body table tr[id="totals"] td ul > li {color: marron}  0, 0, 1, 7li#answer {color: lightblue}                                  0, 1, 0, 1 

你可能会奇怪,计算这个特殊性(权重)的时候为什么 第一个位置的值始终为0呢 ? 一般情况下,第一个0是为内联样式声明保留的,它比所有其他声明的特殊性都高。但是请注意关键字!important,它的优先级甚至 高于 内联样式

但是如果特殊性相等的两个规则同时应用到一个元素会怎么样。那么后面的一个有更高的优先级。 
如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后面。

转载于:https://www.cnblogs.com/dongguapifly/p/10627113.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401449.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue开发问题积累

mounted钩子中使用$refs出现undefined 原因:如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for(即根据获得的后台数据来动态操作DOM,即响应式),那么这些DOM是不会再mounted阶段找到的。 **解决方法&#xff1…

动态规划0—1背包问题

动态规划0-1背包问题 问题描写叙述:给定n种物品和一背包。物品i的重量是wi,其价值为vi,背包的容量为C。问应怎样选择装入背包的物品,使得装入背包中物品的总价值最大?对于一种物品,要么装入背包,要么不装。…

Android Intent.FLAG_NEW_TASK详解,包括其他的标记的一些解释

本文大部分参考自 http://blog.csdn.net/mayingcai1987/article/details/6200909 ,对原文中的讲解FLAG_NEW_TASK地方加了一些自己的观点,用红色标记 1. Task是包含一系列Activity的堆栈, 遵循先进后出原则. 2. Task默认行为: (1) 前提: Activity A和Ac…

vmstat命令详解

参数详情: r runingb blockswpd 虚拟内存使用时间free 物理free内存buff 从硬盘--->内存的 缓冲cache 从内存--->硬盘的 缓存si 从磁盘写入swap的大小/sso 从swap写入磁盘的大小/sbi 块设备每秒接收的块数量bo 块设备每秒发送的块数量cs 每秒上下文切换次数us…

CSharp设计模式读书笔记(22):策略模式(学习难度:★☆☆☆☆,使用频率:★★★★☆)...

策略模式(Strategy Pattern):定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换,策略模式让算法独立于使用它的客户而变化,也称为政策模式(Policy)。 模式角色与结构: 示例代码: usi…

评论 展开|收起

场景: 列表中文本最多三行,超出部分省略,并显示展开收起按钮,如果文本没有超出三行则不显示展开收起按钮 方案: 1)在div 中添加一个span 然后给div设置超出三行省略,这时候就可以获取到文本高…

【原创】linux 下远程连接windows桌面

一、安装过程 首先到http://www.rdesktop.org下载rdesktop 解压后进入rdesktop文件夹 执行命令: [rootmaster swxing]#./configure [rootmaster swxing]#make ; make install 提示没有安装openssl-devel 执行命令安装openssl-devel(以下是在centos下用yu…

什么是.NET

Microsoft.NET 是Microsoft XML Web Service平台。 平台包含4个主要部分1.底层操作系统--Windows。 2.辅助产品--.NET企业服务器。 3.Microsoft XML Web服务--.NET My Servers。 4.开发平台--.NET框架。 CLR和FCL提供的部分服务转载于:https://www.cnblogs.com/dongdongguo/arc…

springboot + ApplicationListener

ApplicationListener自定义侦听器类 Component public class InstantiationTracingBeanPostProcessor implementsApplicationListener<ContextRefreshedEvent> {private static final Logger LOG Logger.getLogger(InstantiationTracingBeanPostProcessor.class);privat…

c语言使用小结

mallocfree typedef struct{   int a;   int b;}HA; cpp是C的扩展在大多数CPP的头文件里 CPP用到的关键字都会被条件编译扩起来以方便C的使用 当C用时CPP用到的关键字不会被编译。本质上CPP是兼容C的。 .lib .o 是程序编译时要使用的己经编译的函数库。 minGW环境可以使用.…

JAVA学习之动态代理

JDK1.6中的动态代理 在Java中Java.lang.reflect包下提供了一个Proxy类和一个InvocationHandler接口&#xff0c;通过使用这个类和接口可以生成一个动态代理对象。JDK提供的代理只能针对接口做代理 java.lang.reflect.Proxy 提供用于创建动态代理类和实例的静态方法&#xff0c;…

net开源项目

1 以色列 特思开源软件 http://cn.tersus.com/#Id3924 2 开源社区 http://www.ctochina.net/ .NET开源项目链接 http://www.cnblogs.com/dustinyang/articles/361479.html项目网址简介Rainbowhttp://www.rainbowportal.net/ http://sourceforge.net/projects/rainbowportal/The…

screen状态变Attached连接会话失败

使用xshell远程登录主机&#xff0c;使用screen命令启动程序运行至后台&#xff0c;意外发现screen session的状态为Attached&#xff0c;使用命令screen -r &#xff1c;session-id>,提示失败信息&#xff0c;重复多次无果。 解决方法&#xff1a;把自己踢掉&#xff0c;然…

引用类型赋值

转载于:https://www.cnblogs.com/dongyuhan/p/6519711.html

poj2624 4th Point

纯水题&#xff0c;注意交点不一定是第二个点和第三个点 #include<stdio.h>#include<string.h>#include<stdlib.h>#include<math.h>#include<algorithm>using namespace std;struct Vector{ double x; double y;};struct point{ double…

Windows Phone开发(30):图形 转:http://blog.csdn.net/tcjiaan/article/details/7453028

图形如矩形、椭圆、路径等都从Shape类派生&#xff0c;它们一般表示规则或不规则图形&#xff0c;这些图形都是简单的二维图形&#xff0c;我相信大家都能理解的。 例一&#xff1a;矩形。 请看下面的XAML代码。 [html] view plaincopyprint? <Rectangle RadiusX"20&q…

安装android sdk,后出现导出错误,提示命令行找不到解决方案

安装android sdk&#xff0c;后出现导出错误&#xff0c;提示命令行找不到解决方案 The steps. Rename android sdk tool folder : [Your Android SDK root]/tools -> toolsXXXX Download SDK Tools: http://dl-ssl.google.com/android/repository/tools_r25.2.5-windows.z…

Windows Phone开发(46):与Socket有个约会 转:http://blog.csdn.net/tcjiaan/article/details/7669315...

不知道大家有没有“谈Socket色变”的经历&#xff1f;就像我一位朋友所说的&#xff0c;Socket这家伙啊&#xff0c;不得已而用之。哈&#xff0c;Socket真的那么恐怖吗&#xff1f; 其实这话一点也不假&#xff0c;Socket有时候真的不太好操控&#xff0c;也不好维护&#xff…

百度分享插件wbuid属性无法@指定微博

好久不写博客&#xff0c;看到很多人遇到相关的问题&#xff0c;决定写一篇拯救大家于水火 现象很简单&#xff0c;你要是根据官网的例子来&#xff0c;肯定出错。。。。 官网上教你如果想在分享时自动""并且在分享后提示关注要用wbuid这个属性来配置微博id对不对&am…

lucene计分公式详解

lucene计分工具Similarity&#xff1a; 查询query q 相对于文档document d的得分跟空间向量里面 查询q 与 文档d 的余弦值有关。文档d 矢量 与 查询q 矢量越靠近&#xff0c;文档等分越高。转载于:https://www.cnblogs.com/deacon/articles/2608078.html