嵌套 div 中链接的覆盖样式答案

【问题标题】：Overriding style of links in nested div嵌套 div 中链接的覆盖样式
【发布时间】：2017-08-15 06:22:10
【问题描述】：

我在设置嵌套 div 中的链接颜色时遇到问题。链接以默认样式显示在父 div 元素中。

简而言之，假设我们有以下 HTML 代码：

<body>
    <div id="message">
        <div class="wrap">
            <a href="...">Link 1</a>
            <a href="...">Link 2</a>
            <div class="website">
                <div class="website-button">
                    <a href="...">Link 3</a>
                    <a href="...">Link 4</a>
                </div>
            </div>
        </div>
    </div>
</body>

在我使用的#message/wrap 容器中设置Link 1 和Link 2 元素的样式：

        #message a:link { color: rgba(85, 165, 255, 1.0); }
        #message a:visited { color: rgba(85, 165, 255, 1.0); }
        #message a:hover { color: rgba(95, 185, 255, 1.0); }
        #message a:active { color: rgba(95, 185, 255, 1.0); }

另外，我需要Link 3 和Link 4 链接为白色。我以这种方式设计这些链接：

        .website-button a:link,
        .website-button a:visited,
        .website-button a:hover,
        .website-button a:active {
            color: #ffffff;
        }

问题是我无法覆盖.website-button 元素中的链接样式。无论我做什么，它们都会保持蓝色。

以下是我页面的摘录：

<html>
<head>
    <style>
            a { text-decoration: none; }
            a:hover { text-decoration: underline; }
            .wrap {
                max-width: 800px;
                margin: 32px auto;
                padding: 0 24px;
            }
            #message {
                overflow: hidden;
                background: rgba(62, 72, 119, 1.0);
                color: rgba(255, 255, 255, 1.0);
            }
            #message a:link { color: rgba(85, 165, 255, 1.0); }
            #message a:visited { color: rgba(85, 165, 255, 1.0); }
            #message a:hover { color: rgba(95, 185, 255, 1.0); }
            #message a:active { color: rgba(95, 185, 255, 1.0); }
            .website {
                width: 100%; height: auto;
                margin: 0.6rem 0 1.6rem 0;
            }
            .website-button {
                width: 50%;
                height: auto;
                margin: 0 auto;
                padding: 12px 18px;
                background: #f50;
                font-size: 1.8rem;
                line-height: 2.0rem;
                text-transform: none;
                text-align: center;
                font-weight: 700;
            }
            .website-button a:link,
            .website-button a:visited,
            .website-button a:hover,
            .website-button a:active {
                color: #ffffff;
            }
        </style>
</head>
<body>
    <div id="message">
    <div class="wrap">
        <h3>Hello!</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <h3>Twitter: <a href="https://twitter.com/zimnovich">ZimNovich</a></h3>
        <div class="website">
        <div class="website-button"><a href="https://soundcloud.com/zimnovich/mobirrel-radio-edit">Listen it on SoundCloud</a></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <h3>Instagram: <a href="https://instagram.com/zimnovich">ZimNovich</a></h3>
    </div>
    </div>
</body>
</html>

http://codepen.io/anon/pen/evrgay

【问题讨论】：

!important 不工作吗？
@Siraj，是的，它正在工作，谢谢！
这是否意味着我的答案应该被标记为接受的答案？

标签： html css class hyperlink colors

【解决方案1】：

问题是您的以#message 开头的选择器比以.website-button 开头的选择器具有更高的优先级

这是为什么呢？好吧，每个选择器都被赋予了权重或优先级。您会看到，当您选择 1 个类然后选择一个 1 元素时，您的分数基本上为 (0,0,1,1)。当您选择 1 个 id 和 1 个元素（#message 选择器）时，您的得分为 (0,1,0,1)。

使用得分较高的选择器。

如果您将 .website-button 选择器更改为以您的 id #message 开头，则它们的得分将为 (0,1,1,1)，而它们将被使用。

在编写 CSS 选择器时，请记住一个方便的首字母缩略词。

冰

(i) - 内联样式
我 - 身份证
C - 类
E - 元素

选择器中的每个 id 值 (0,1,0,0)，每个类值 (0,0,1,0)，每个元素值 (0,0,0,1)。每个存储桶的优先级都高于之前的存储桶。

重要提示：1个类强于10个元素，1个id强于10个类

->http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

【讨论】：

很好的答案，谢谢！但是，如果我想将 .website-button 类与将嵌套在具有其他 id（#message 除外）的 div 中的 div 一起使用怎么办？
那么你仍然需要一个更强大的选择器。您需要在 HTML 中更高的 ID 来帮助您。尽量记住选择器的分数，因为随着系统变得越来越复杂，击败强规则变得更具挑战性。使用类而不是 ID，这样你的规则就更弱，更容易被击败。
我喜欢这个首字母缩写词，但点部分不正确。如果另一个选择器有更多的 ID，那么任何数量的类都会丢失。不过除此之外的好答案！
是的，让我们重新措辞点部分。必须是一种更简单的表达方式。尝试了 256 个类的东西，使用脚本生成类：jsfiddle.net/ht9s4h6d ID 仍然胜过 256 个类。

【解决方案2】：

试试这个 #message .website-button a:link, #message .website-button a:visited, #message .website-button a:hover, #message .website-button a:active { color: #ffffff; }

【讨论】：

【解决方案3】：

http://codepen.io/anon/pen/WpJpQp

尝试将 !important 添加到以下内容的末尾。另请参阅随附的代码笔。

.website-button a:link,
        .website-button a:visited,
        .website-button a:hover,
        .website-button a:active {
            color: #ffffff !important;
        }

【讨论】：

【解决方案4】：

您可以将“网站”类 div 包装如下

<div id="myWrap">
   <div class="website">
       <div class="website-button">
          <a href="...">Link 3</a>
          <a href="...">Link 4</a>
        </div>
   </div>
</div>

并像这样使用样式：

    #myWrapper a:link {
  color: rgba(85, 165, 255, 1.0);
}

#myWrapper a:visited {
  color: rgba(85, 165, 255, 1.0);
}

#myWrapper a:hover {
  color: rgba(95, 185, 255, 1.0);
}

#myWrapper a:active {
  color: #fff;
}

【讨论】：

【解决方案5】：

只需将嵌套链接的 css 标记为重要。

   .website-button a:link,
   .website-button a:visited,
   .website-button a:hover,
   .website-button a:active {
       color: #ffffff !important;
   }

【讨论】：