Question

如何让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>

Answer 1

使用：第一胎选择器

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

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

Answer 2

您正在寻找:first-of-type CSS pseudo-class：

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

请参阅 demo fiddle here 。

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

Answer 3

你可以使用第一个孩子

它与上一个孩子完全一样，但它是第一个孩子。应该工作正常。这是一个codepen：

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

Answer 4

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

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元素。

如何让CSS选择器跳过？

4 个答案: