css选择器的特殊性值
今天从前端那拿来写好的页面,就开始动工,首先,照旧处理导航栏高亮的问题,
说到处理高亮的问题,不同的人会有不同的方法,比如:
//类名为nav的元素下的第n个a元素
.nav a:nth-of-type(n){
color:#ff0000;
}
或者,为每个导航栏目设置不同的类名,然后在对应页面,为该导航栏设置高亮;
再或者,导航栏类名都一样的话,用js在每个页面为当前导航栏设置高亮样式或者添加高亮类名(样式提前设定);
总之,方法是多种多样的。
就我今天拿到的页面来说,前4个a标签我用了a:nth-of-type(n)进行了处理,由于这位同学对导航栏处理的问题,第5个
栏目不适合这种方法,于是我就直接为其设置一个单独的类名,并在该栏目页面设置高亮,但是却不奏效。
第一时间按下F12,审查元素:
(咳咳,这个文件名用中文大家就别吐槽了)
上面是全局样式,当然是会放在html文件头部最前面的,后面的样式是我写在栏目当前页的,可以看到,我写的高亮样
式居然没有奏效,被覆盖了,没有道理啊,应该是高亮样式覆盖之前的样式啊,后来者居上嘛,于是我就这么对它望着,
1min之后,灵光一闪,选择器权重啊,于是换了种选择器写法(增加权重),于是问题圆满解决。
其实这得归功于我在很久之前通读过《css权威指南》这本书,我记得里面提到过特殊性值(上文所说的权重)的概念。
这一概念完美解答了“当为一个元素,设置了多种样式时,哪一种会奏效”的问题。
其实说到这个问题,大多数人都会回答说外部样式、嵌入样式、内联样式,以及三者的优先级问题。很少会有人提到特殊
性值,所以这里就体现了书本的重要性。
下面贴上《css权威指南》第三版的关于这部分的描述(每个版本的面熟可能不尽相同,但是说的都是一个东西)
我当时看的应该是第四版。
所以现在你知道了,并不是谁越靠近元素就会使用该样式,最终还是由选择器的特殊性值来决定到底用哪一个样式。
css选择器的特殊性值的更多相关文章
- CSS选择器的特殊性
在我们为元素添加样式的时候,或多或少会出现一个元素会有几个不同规则的样式.有#id的,有.class,直接标签元素的,还有各种组合起来的选择器.那CSS到底如何解决这些冲突呢,我们这次专门来探讨一下. ...
- CSS选择器的特殊性和LOVE HA
在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢? 答案就是:CSS特殊性(CSS specificity) 选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, ...
- css优先级之特殊性
在前端开发的时候,css构建样式规则,这个时候我们会遇到一个问题:当我们对同一个元素做多个样式规则,其中发生了冲突的时候,css是如何选择最终呈现的样式 如下: div{ color:red; } d ...
- (转)css选择器及其优先级
文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- CSS选择器特殊性与重要性
特殊性 在编写CSS代码的时候,我们会出现多个样式规则作用于同一个元素的情况,例如 <!-- HTML --> <header> <nav class="nav ...
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- CSS选择器中的特殊性
我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
随机推荐
- UEditor文本编辑器
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质 外,还采用了分层理念,使开 ...
- 对Servlet请求或响应进行JMockit测试
对Servlet请求及响应进行mock方法, 通过getMockInstance方法对servlet进行打桩,对servlet提供的方法进行mock,替代真正的servlet请求或响应. 参考链接: ...
- 如何使用sql函数平均值、总数、最小值、最大值
使用sql函数,您可以在一个select语句的查询当中,直接计算数据库资料的平均值.总数.最小值.最大值.总和.标准差.变异数等统计.使用recordset对象时,也可使用这些sql函数. sql函数 ...
- powerdesign简单应用
PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...
- Asp.Net中OnClientClick与OnClick的区别
当我们当击这个按钮时,自动先执行的客户端,再执行服务器端的.如果客户端返回的是false,那么服务器端对应的方法永远不会执行.这样就达到检测,只有通过才去执行服务器端的方法.
- 深入解析Koa之核心原理
这篇文章主要介绍了玩转Koa之核心原理分析,本文从封装创建应用程序函数.扩展res和req.中间件实现原理.异常处理的等这几个方面来介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参 ...
- 20145109 《Java程序设计》第三周学习总结
20145109 <Java程序设计>第三周学习总结 教材学习内容总结 Chapter 4 Object 4.1 Class & Object definition of clas ...
- 联合体union
1.一般而言,共用体类型实际占用存储空间为其最长的成员所占的存储空间: //4*7==282.若是该最长的存储空间对其他成员的元类型(如果是数组,取其类型的数据长度,例int a[5]为4)不满足整除 ...
- Eclipse使用Maven搭建Java Web项目并直接部署Tomcat
1.环境: Windows 10 Java 1.8 Maven 3.3.9 Eclipse IDE for Java EE Developers 2.准备: eclipse环境什么的不赘述,Maven ...
- Ubuntu系统Anaconda下载安装与切换源教程【转】
本文转载自:https://blog.csdn.net/qq_36268036/article/details/81517893 1. 下载安装: 这里选用国内清华大学的Tuna开源软件镜像站作为演示 ...