html - 覆盖嵌套 div 中的链接样式-6ren

html - 覆盖嵌套 div 中的链接样式

转载作者：太空宇宙更新时间：2023-11-03 19:48:58

26

4

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

最佳答案

问题是您以 #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)。每个桶的优先级都高于前一个桶。

Important to note: 1 class is stronger than 10 elements, and 1 id is stronger than 10 classes

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

关于html - 覆盖嵌套 div 中的链接样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42963475/

26

4

0

文章推荐： python - 牌组洗牌算法还不够 "human"

文章推荐： c# - 在表中动态创建的文本框丢失文本值

文章推荐： python - 如何通过 USB 发送一个 gcode 命令？

文章推荐： c# - 使用 Winform C# ，删除 exe 所在的文件夹

css - 嵌套 DIV - 嵌套 DIV 不占用高度？
所以我试图设置“内容”类的高度，但它似乎不起作用。我对嵌套 DIV 非常陌生，我已经尝试了我在谷歌搜索中发现的修复程序，但似乎没有任何效果。帮助？
php - 嵌套 View 中的 Laravel 嵌套 View
好的，所以我一直在四处寻找，但找不到这个问题的答案。但是，我需要将一个 View 嵌套在另一个 View 中。我有一个 $layout 正在使用我拥有的 default.layout Blade 文
php - 嵌套 View 中的 Laravel 嵌套 View
好的，所以我一直在四处寻找，但找不到这个问题的答案。但是，我需要将一个 View 嵌套在另一个 View 中。我有一个 $layout 正在使用我拥有的 default.layout Blade 文
java - 嵌套 <嵌套 :equal> and in combination
基本上，我的问题很简单，但它需要知道 Struts 1.1 并且还活着的人。我尝试构建的伪代码看起来像这样: IF element.method1 = true THEN IF element
java - 为 Excel 嵌套 if 语句编写 Java 嵌套 if 语句？
我正在尝试将 Excel 嵌套 IF 语句转换为代码语言，但我不确定我是否正确执行此操作，希望能得到一些帮助这是Excel语句: =IF(D3="Feather",IF(OR(I3>1000,R3=
javascript - 嵌套 ng-repeat 索引不起作用 ||嵌套 ng-click 不起作用
如果我们创建两个或三个评论并对其进行多次回复，则“有用”链接在单击时会导致问题，它会对具有相同编号的索引执行 ng-click 操作，从而显示具有相同索引的所有文本。如何解决此嵌套问题，以便在单击链接
java - 将 Scala 嵌套 Map 转换为 Java 嵌套 util.Map
我在项目中使用Scala，想与Stripe集成，但它只提供Java API。例如，要创建 session ，我使用: val params = new util.HashMap[String, Any
使用 CSS 类时，嵌套 Div 中的 HTML 嵌套 Div 不显示
以下代码有一个 Div，其中连续包含四个较小的 Div。四个 Div 中的每一个还包含一个较小的 Div，但此 Div 未显示。我尝试了各种显示和位置组合，看看 div 是否会出现。 classGoa
嵌套 for 循环的大时间复杂度
我在这里有一个问题，循环是: for (i=0; i < n; ++i) for (j = 3; j < n; ++j) { ...
python :嵌套
我正在尝试编写代码来显示具有奇数宽度的形状。形状完成后，将其放置在外部形状内。用户将能够输入用于形状的字符和行数。我希望生成一个形状，并通过 for 循环生成一个外部形状。 ***** .
jquery 嵌套 .each
$(".globalTabs").each(function(){ var $globalTabs = $(this); var parent = $globalTabs.parent
嵌套 for 循环的复杂性
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve th
嵌套 While 循环的算法复杂度
所以我在这个问题上遇到了一些麻烦，因为变量 i。我只是不确定在第二个 while 循环中如何处理它。对于我的外循环，我知道它将运行 log_4(n^2) 次迭代。对于内部 while 循环，我计算的迭
JSON Schema 嵌套 If Then
我似乎找不到在枚举上应用多个 if/then 逻辑的工作方式。 anyOf 不应用条件逻辑，而是表示如果其中任何一个匹配则很好。 allOf 再次不应用条件逻辑，而是测试属性/必填字段的超集。这是一
Haskell(嵌套)ReaderT
如何访问 ReaderT 的内部 monad。在我的例子中，我有类型: newtype VCSSetupAction a = VCSSetupAction (ReaderT (Maybe VCSCo
excel - 嵌套 IF 以用零填充数字
这个问题在这里已经有了答案: Add leading zeroes/0's to existing Excel values to certain length (7 个回答) 7年前关闭。我正在寻
Excel 嵌套 IF 函数与 AND/OR
我已经绑定(bind)了很多 AND/OR 函数的组合并且没有运气。这是我需要创建的: 在 B 列中，我有公司 ID，范围从两个数字字符到六个数字字符。我需要在 B 列中的每个公司 ID 之前的每
vba - 嵌套 If 语句有问题
我是 VBA 新手，在尝试编写的宏中使用 If 语句时遇到了一些困难。每个月我都会收到一份 Excel 报告，其中列出了我们公司的哪些员工执行了某些任务。我正在编写的宏旨在将每个员工的数据复制并粘贴到
excel - 嵌套 IF 语句
如果在 B 列中找到单元格 A1 中的值，则使用文本 321 填充除非在 C 列中找到单元格 A1 中的值，在这种情况下填充文本 121反而。如果单元格 A1 的内容不在 B 列或 C 列中，则使用
Excel:嵌套 if 语句不删除第二个条件中的空格
我有几十万个地址。其中一些在整数之后有粒子。如 4356 A Horse Avenue , 其他格式正常4358 Horse Avenue .有些有“A”，有些有“B”。我正在尝试删除整数和粒子之间的

首页

博学

6Ren·AI

商城

html - 覆盖嵌套 div 中的链接样式