关于选择器权重导致的a:hover 失效问题

文章目录

引言
练习
css选择器优先级
案例引用出处

引言

我在网上看视频自学前端，做到css选择器的一个小练习时遇到了一些问题，把它记录下来，如果你有此问题的朋友可以看看，希望能帮到大家！

我在写静态页面的时候，声明了一个a:hover，为了让鼠标悬停在a上时改变字体颜色。当我给.new-list li a设置颜色样式，再去设置a:hover是不会生效的，这是因为a:hover本质也是改变a标签的样式，而在.new-list li a选择器也改变了a的样式，其权重大于a:hover选择器权重，导致a:hover失效，更改a:hover权重后即可生效。

练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习</title><style>.new-list li a{color: #666;} .aa a{color: #000;}/* 设置超链接移动效果 */a:hover{color: red;}.new-list li a:hover{ color: red;} </style>
</head>
<body><div><ul class="new-list"><li ><a href="#">这是列表的第一条</a></li></ul><ul class="aa"><li ><a href="#">这是一个简短的测试</a></li></ul></div>
</body>
</html>

css选择器优先级

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>/*1.特殊性值：0,0,0,1*/a{color: rgb(243, 118, 17);} /*2.特殊性值：0,0,0,2*/div a {color: green;}/*3.特殊性值：0,0,1,1*/.demo a {color: black;}/*4.特殊性值：0,0,2,1*/.demo input[type="text"] {color: rgb(9, 9, 236);}/*5.特殊性值：0,0,2,0*/.demo *[type="text"] {color: grey;}/*6.特殊性值：0,1,0,1*/#demo a {color: orange;}/*7.特殊性值：0,1,0,2*/div#demo a {color: rgb(255, 17, 17);} /* 8.特殊值：0,0,1,0 */.aa{color: rgb(221, 57, 194);}/* 9.特殊值：0,0,0,1 */input{color: aqua;}</style>
</head>
<body><a href="#">第一条应该是黄色</a><!--适用第1行规则--><div class="demo"><a href="#">第二条应该是黑色</a><!--适用第2、3行规则，第3行优先级高--><input type="text" value="第三条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高--><input class="aa" type="text" value="第四条应该是蓝色"><!-- 适用于4、8行规则，第4行优先级高 --><input class="aa" value="第五条应该是紫色"><!-- 适用于8、9行规则，第8行优先级高 --></div><div id="demo"><a href="#">第六条应该是红色</a><!--适用第6、7行规则，第7行优先级高--></div>
</body>
</html>

实现的效果

案例引用出处

https://www.cnblogs.com/CaseyWei/p/9333354.html
https://www.cnblogs.com/summer99891112/p/3719624.html
a:hover 失效问题

关于选择器权重导致的a:hover 失效问题相关推荐

CSS（一）引入方式选择器权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
CSS 选择器权重计算规则
CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. ...
前端工程师实战开发：CSS样式继承、像素与选择器权重详解
餐厅练习具体看resource文件夹或者百度继承 <body><p>我是p元素<span>我是p里面的span</span></p> ...
CSS选择器权重计算与优先级
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级. 一:优先级等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元 ...
关于css媒体查询中的选择器权重的问题
@media中的选择器的优先级今天写响应式页面的时候发现了个问题在这里记录一下 .content .right-box {width: 240px;float: right; } 我写的页面是三栏式 ...
关于hover失效问题（！important）
在如下代码中,利用JS更改div的高宽后,导致内部a标签hover效果失效: <!doctype html> <html> <head> <meta char ...
css基础伪类选择器与选择器权重以及盒子模型的用法演示
1. 伪类选择器根据元素的位置或状态来匹配子元素 1.1 结构伪类与上下文选择器很相似后文演示所用 HTML 代码如下: <!DOCTYPE html> <html lang= ...
什么情况下会导致@Async异步方法会失效？
什么情况下会导致@Async异步方法会失效? a.调用同一个类下注有@Async异步方法:在spring中像@Async和@Transactional.cache等注解本质使用的是动态代理,其实Spr ...
使用某些 DOCTYPE 时会导致 document.body.scrollTop 失效
使用某些 DOCTYPE 时会导致 document.body.scrollTop 失效,总是等于 0, 这使得在编写一些浮动层的定位代码时会出现差错.解决的办法是改用 document.docume ...

关于选择器权重导致的a:hover 失效问题

文章目录

引言

练习

css选择器优先级

案例引用出处

关于选择器权重导致的a:hover 失效问题相关推荐

最新文章

热门文章