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

卓sir_TR

已于 2022-03-09 16:29:41 修改

阅读量682

点赞数

分类专栏：前端学习遇到的问题文章标签： css 前端 html

于 2022-03-09 15:18:41 首次发布

本文链接：https://blog.csdn.net/qq_40752447/article/details/123377875

版权

前端学习遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

引言

我在网上看视频自学前端，做到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>