Question

我的code：

<div class="allegati-item">
    <div class="allegati-titolo">Download</div>
    <a class="allegati-link" href="/documenti/DocumentoTest.pdf">Link1</a>
    <a class="allegati-link" href="/documenti/DocumentoTest.pdf">Link2</a>
</div>

.allegati-link
{
    border-top:1px solid #FF0000;
    display:block;
    margin-bottom:4px;
}

.allegati-item a.allegati-link:first-child
{
    border:0;
}

我想在第一个allegati-link元素中删除边框，但由于前面有一个div，在allegati-item内，似乎这不可能吗？

Answer 1

您可以尝试这样做：

.allegati-item .allegati-titolo + a.allegati-link{

Answer 2

改为使用:first-of-type或

.allegati-item > .allegati-titolo + a

最后一个版本的浏览器支持稍微好一些（从IE7开始），而第一个版本对标记的依赖性较小。

Answer 3

假设:first-of-type可能是最佳选择，这是浏览器的另一种替代方法，它不支持该伪类

.allegati-link { border: 0; }
.allegati-link + .allegati-link { border-top: ...}

这样做只会从第一个链接中删除边框。

Answer 4

你也可以

$(".allegati-titolo").next().attr("style", "border-top:0px; display:block; margin-bottom:4px;");

这将首先选择具有class =“allegati-titolo”的div的下一个元素，然后将该样式应用于第一个链接。

我不能在这种情况下使用：first-child选择器吗？

4 个答案: