css - Bootstrap 4 轮播链接覆盖所有其他链接

Question

有没有人有这个问题，我有三种链接颜色

.custom-links > a, a:link, a:hover, a:visited {
    color: black;
}

.carousel-caption > a, a:link, a:hover, a:visited, a:active {
    color: white;
}

.rss-links > a, a:link, a:hover, a:visited, a:active {
    color: gray;
}

<div class="carousel-caption">
                            <h1>@slides.SlideTitle</h1>
                            @if (!string.IsNullOrEmpty(slides.SlideUrl))
                            {
                                <p class="caption-link"><a href="@slides.SlideUrl">@slides.SlideSubTitle</a></p>
                            }
                            else
                            {
                                <p>@slides.SlideSubTitle</p>
                            }

                        </div>

<div class="rss-links">
                    <a href="@item.LinkToSource">Read More</a>
                </div>

<div class="col-md-6 link-padding custom-links">
                    <a class="btn btn-warning btn-block" href="@link.Url">@link.Name</a>
                </div>

添加了其他链接

但无论我尝试什么，carousel-caption 都会覆盖我其他 2 个链接的样式。

我是不是漏掉了什么!!

Answer 1

你的代码有一堆问题

这个选择器 > 被称为 direct descendant selector 这意味着当你写 .carousel-caption > a 你试图选择a 标签是 .carousel-caption 的直接后代，但不是。在您的 HTML 结构中，我看到 a 是 p.caption-link

的直接后代

其次，当你编写 .carousel-caption > a, a:link, a:hover, a:visited, a:active { color: white;} 时，它会选择直接后代 a(我之前写的不是这种情况)和整个文档中的所有其他 a:link、a:hover、a:visited、a:active。因为您也没有在它们之前放置选择器。

(例如 .selector a、.selector a:link、.selector a:hover 等)

你只需要写这样的东西

.custom-links a {
  color: black;
}

.carousel-caption a{
  color: red; /* change to white */
}

.rss-links a{
  color: gray;
}

<div class="carousel-caption">
  <p class="caption-link"><a href="#">this is the carousel link</a></p>
</div>
<div class="rss-links">
  <a href="@item.LinkToSource">Read More</a>
</div>

<div class="col-md-6 link-padding custom-links">
  <a class="btn btn-warning btn-block" href="@link.Url">@link.Name</a>
</div>