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>

添加了其他链接

但无论我尝试什么，旋转木马标题都会写出我其他2个链接的样式。

我在这里错过了什么!!

Answer 1

您的代码存在许多问题

此选择器>称为direct descendant selector，这意味着当您编写.carousel-caption > a时，您试图选择a标记，该标记是{.carousel-caption的直接后代1}}不是。在您的HTML结构中，我看到a是p.caption-link

的直接后代

其次，当你编写.carousel-caption > a, a:link, a:hover, a:visited, a:active { color: white;}时，它会选择直接后代a（这不是我之前写过的情况）和ENTIRE文档中的所有其他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>

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

1 个答案: