伪类失效原因分析

Kavelaa小站初步搭建完成之后的这么多天里,我没有对代码再更新过,忙着系统学习JS基础知识,搞博客页的广告去了。其实我还留了一个坑没有填,今天去填坑的时候遇到了一些问题,感觉挺有价值,拿出来分享一下。

这个坑就是我的导航栏的“我的Blog”块的a标签的问题。因为我要求当网页向下滚动超过150像素之后,需要改变字体大小,行高,颜色,我是通过JS改动导航栏class’index’下的a标签的颜色来改动的,此外,我还设置了对应的a标签伪类hover的color属性,目的是希望用户鼠标置于链接上之后能有视觉上的反馈。

这个时候问题发生了,我把鼠标放在链接文字上居然没有反应?调出控制台查看,发现伪类中的color属性被划了一道杠,失效了。

现在分析下原因。

JS的改动会直接发生到html元素内建样式,优先级是最高的。从而导致我CSS中设置的属性优先级低于JS改动的属性。因此伪类hover失效了。如果想通过JS实现hover的功能,就稍微复杂一些,需要设置mouseover和mouseout。然而我的运气很好,在网上搜索到的答案不仅解答了我的问题,还给出了问题的优解。尊重原答案,附上链接:https://bbs.csdn.net/topics/391068677

为了方便访客,我把原回答引用过来:

权重(摘自《CSS实战手册》)

引入

示例
<div class=”navBox”>
<ul class=”nav”>
<li><a href=”#”>111</a></li>
<li><a href=”#”>222</a></li>
<li><a href=”#”>333</a></li>
</ul>
</div>
<style>
.navBox a {background-color: red;}
.navBox .nav a {background-color: green;}
.nav a {background-color: blue;}
.nav li a {background-color: silver;}
</style>

<a>的背景色?

权重计算

原理
根据赋值给样式选择器(标签选择器 类选择器 ID选择器)的值
来确定样式的权重
最具体样式中的属性会胜出

方式
一个标签选择器 1分
一个类选择器 10分
一个ID选择器 100分
一个内建样式 1000分
举例
.navBox a
10 + 1 = 11分
.navBox .nav a
10 + 10 + 1 = 21分
.nav a
10 + 1 = 11分
.nav li a
10 + 1 + 1 = 12分


1) 继承来的属性没有任何权重值
2) 权重值相同时最后一个样式胜出
3) 先列出所有的外部样式表, 然后纳入内部样式.

忽略权重值

说明
CSS提供了一种可以完全忽略权重值的方法.
当你一定且必须要确保某一个特定的属性不被另一个更具体的样式覆盖时,
可以使用这种技术
只要在需要保护的属性后面插入 !important 就可避免被权重更大的属性覆盖.
示例

.navBox .nav a {background-color: red;}
a { background-color: black!important; }

看完之后我发现,我之前其实是学习过这个优先级计算的,今天遇到问题算是实践和巩固了这个知识。尤其是最后的!important,提醒各位和我一样的新手,教学里说最好避免使用的东西,不要就不记了,还是得当成正常知识来记忆,留个印象,指不定哪一天可以解决燃眉之急。

最后我并没有使用这个办法,因为我发现是我的马虎造成的问题。’我的Blog’块之所以变成紫色,是因为visited伪类默认紫色,然而我修改的伪类是link。。。后来我把visited伪类的color属性改成inherit之后,问题迎刃而解。另外也不再通过修改header来更改子类color属性了,再次小幅优化了下代码。感觉自己现在的坑还是挺多。

发表评论

电子邮件地址不会被公开。 必填项已用*标注