覆盖页脚中的全局锚点悬停样式答案

【问题标题】：Overriding global anchor hover styles in footer覆盖页脚中的全局锚点悬停样式
【发布时间】：2016-02-22 02:09:15
【问题描述】：

我已使用全局元素选择器a:hover{} 将鼠标悬停在网页中的大多数元素上。但是对于页脚中的所有元素，我想覆盖悬停效果。

所以我的问题是如何在元素选择器a:hover{} 用于其他地方时覆盖它，因为我不希望所有a 元素都悬停

HTML

<body>
        <div class="header">
            <div class="header_logo">
                <img id ="logo" src="civic-logo.jpg">
            </div>
            <div class="header_title">
                <div id="titles">
                    <ul>
                        <li><a href="#">ABOUT CIVIC</a><li>
                            <li><a href="#">PRODUCTS</a>  
                                <ul>
                                    <li><a href="#">CEMENT</a></li>
                                    <li><a href="#">STEEL</a></li>
                                    <li><a href="#">BRICKS</a></li>
                                    <li><a href="#">SAND</a></li>
                                </ul>
                            </li>
                            <li><a href="#">CONTACT US</a> </li>
                        </ul>

                        </div>
                    </div>
                </div>

                <div class="content">
                    <img src="images/clt3.jpg">
                </div>
                <div class="footer">
                    <div class="footer_upperspace">

                            <ul>
                                <li><a href="#">CIVIC HOME</a></li>
                                <li><a href="#">INQUIRY</a></li>
                            </ul>

                    </div>
                </div>


                </body>

CSS

    /*Main Header Container */
    .header{
      color:#FFFFFF;    /*White Color*/
      height:60px;
      width:100%;
      margin:auto;
    }
    /*Inner Logo Container on the left*/
    .header_logo{
      width:40%;
      height:100%;
      float:left;
    }
    #logo{
      height:100%;
      top:0;
      left:0;
      width:50%;
    }
    /*Inner Title Container on the right*/
    .header_title{
      width:60%;
      float:left;
    }
    #titles{
      position:absolute;
      top:20px;
      font-family: "Times New Roman", Times, serif,Georgia;
      font-size:97%;
      color:#B8B8B8;
    }
    ul{
      list-style-type:none;
    }
    li{
      display:inline-block;
    }

    a{
      text-decoration: none;
      color:inherit;
      padding: 21px 10px;
    }

    ul a:hover{
      background-color:#666699;  /*Purple Color */

    }

    ul li ul{
      display:none; /*Hiding The Child Elements*/
    }
    li ul li{
        padding: 21px 10px;
        background-color:#666699 ;
        }


    ul li:hover ul{   /*For all the ul elements whose parent is being hovered over*/
      display: block;
      position: absolute;

      width: 100%;
      top: 40px;
      left: 0;
      white-space: nowrap;
    }

    ul li ul li:hover{
        background-color:#C0C0C0;   
        }

      *{border:0;
        margin:0;
        padding:0;
        }
    /*Main Content Section*/
    .content{
        height:525px;
        margin:auto;
        background-color:#C0C0C0;
        }
        img{
            width:1280px;
            height:515px;
            }
/*Footer*/

        .footer {
        margin:auto;
        background-color:#707070;
        height: 100px;
    }

    .footer_upperspace  {
        background-color:#C0C0C0;
        height:40%;
    }

我附上了 JSFiddle，让您了解我在做什么

https://jsfiddle.net/rajivsr2309/b2o3Lzny/

【问题讨论】：

您有问题吗？
@Shomz 我已经修改了

标签： html css css-selectors hover

【解决方案1】：

您始终可以使用更严格的选择器（specificity 更高）来覆盖不太严格的选择器。例如：

a:hover {color: red}
a.cancel:hover {color: green}

<a href="">Some link</a>
<a href="">Some link</a>
<a href="">Some link</a>
<a href="">Some link</a>
<a href="" class="cancel">Some different link</a>
<a href="">Some link</a>

在您的情况下，选择器是：.footer a:hover:https://jsfiddle.net/b2o3Lzny/2/

同样，由于您要撤消一般规则，因此您的方法可能是错误的，您可以考虑为您想要设置样式的锚创建一个特定的类，而不是所有锚，然后撤消其中的许多。

【讨论】：

您能否分享一些关于创建特定类以设置特定锚的样式的一些信息？您的意思是说，作为一般规则，锚点不悬停，并且特定类应该只应用于我想要悬停的锚点。对吗？
正是这样！基本上我在这里建议白名单与黑名单。例如，在您的情况下，您甚至可以将 ID 放入 ul 并使用选择器 #myUL a:hover。但是不要忘记，所有浏览器都会对所有锚点悬停（文本下划线）应用一些样式，因此如果您不想要它们，则需要覆盖这些样式。

【解决方案2】：

试试这个：

.footer a:hover { background-color: yellow; }

Revised Demo

.footer 在 a:hover 之前，现在这是一个 descendant combinator selector，它只匹配存在于类 footer 的元素中的悬停锚元素。

【讨论】：