Question

我在嵌套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>

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

        #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

Answer 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选择器时，这是一个方便的首字母缩写词。

<强> ICE

（i） - 内联样式
我 - ID
C - 班级
E - 元素

选择器中的每个id值（0,1,0,0），每个类值（0,0,1,0），每个元素都是（0,0,0,1）。每个桶的优先级高于之前的桶。

需要注意的重要事项： 1个类比10个元素强，1个id强于10个类

- ＆GT; http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 2

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

Answer 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;
        }

Answer 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;
}

Answer 5

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

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

覆盖嵌套div中的链接样式

5 个答案: