1

如何让 CSS 选择器跳过<dd>并应用于所有<dt>唯一的？我试图只适用border-bottom于第一个<dt>.

我试过：dl > dt:not(:last-child)，但这也不起作用。

CSS：

dt:not(:last-child) {
    border-bottom: 5px solid #dddddd;
}

HTML：

<dl>
    <dt>Dates of Operation</dt>
    <dd style="display: none;"></dd>
    <dt>Dates of Operation</dt>
    <dd style="display: none;"></dd>
    <dt>Dates of Operation</dt>
    <dd style="display: none;"></dd>
</dl>
4

4 回答 4

1

使用 :first-child 选择器

dl > dt:first-child { border-bottom: 5px solid #dddddd; }

小提琴：http: //jsfiddle.net/2SZ9f/

于 2013-10-01T01:19:51.533 回答
1

您正在寻找:first-of-typeCSS 伪类：

dl > dt:first-of-type {
    border-bottom: 5px solid #dddddd;
}

在此处查看演示小提琴。

与往常一样，请确保在使用之前检查目标浏览器支持。如果您有大量观众，实现您想要的目标的标准方法是使用常规课程。

于 2013-10-01T01:25:27.850 回答
0

你可以使用第一个孩子

它的工作方式与最后一个孩子完全相同，但它是第一个孩子。应该可以正常工作。这是一个代码笔：

http://codepen.io/anon/pen/eFkbq

于 2013-10-01T01:19:19.837 回答
0

这取决于哪个是特殊元素。如果第一个是唯一有边框的，那么你应该使用

dt:first-child{
        border-bottom: 5px solid #dddddd;
}

但是，如果您想对除最后一个之外的每个孩子都设置边框，请尝试以下操作：

dt {
    border-bottom: 5px solid #dddddd;
}

dt:last-child {
    border-bottom: none;
}

这将覆盖添加到 dt 元素的边框底部样式。

如果您只有 2 个元素，则可以添加id,class或first-child. 如果最后一个孩子是特殊的，则为其添加 css，您可能还有许多其他dt元素。

于 2013-10-01T01:20:50.607 回答