0

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

.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 个链接的样式。

我在这里错过了什么吗！

4

1 回答 1

1

你的代码有很多问题

此选择器>称为 the direct descendant selector，这意味着当您编写时，.carousel-caption > a您正在尝试选择一个标签，该标签是which is nota的直接后代。.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>

于 2018-06-13T11:18:51.523 回答