Question

我尝试（也在这里搜索）选择一个特定的元素但没有成功：

<form id="filterForm">
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
   <div class="optioncontent">
       <div>

我喜欢的元素是通过CSS选择的是带有类filterOption filterSection的ver last div。我试过了：

.filterSection:last-of-type
.filterSection:last-child
.filterSection:last-of-type
.filterSection:last-child

有关如何实现这一点的任何想法？帮助会很棒！

Answer 1

其实我不知道你想要什么，是用你的半码选择特定的一个还是选择最后一个？如果是这样的话：

.filterOption.filterSection:nth-child(1){
    background-color:yellow;
}
.filterOption.filterSection:nth-child(2){
    background-color:red;
}
.filterOption.filterSection:nth-last-child(2){
   background-color:grey;
}

<form id="filterForm">
<div class="filterOption filterSection">1</div>
<div class="filterOption filterSection">2</div>
<div class="filterOption filterSection">3</div>
<div class="optioncontent">
<div>

这是http://jsfiddle.net/ianwong/p3s62rrm/

如果您想从严格关闭的代码中进行选择，可以点击http://jsfiddle.net/ianwong/p3s62rrm/1/

Answer 2

感谢大家的帮助。

正如Paulie_D所说，它不灵活，但我的代码是动态的（div class =“filterOption filterSection”）。正如Hashem Qolami所写，这是不可能的。

我也尝试过：nth-last-child（1）作为wong ian和ghorg12110提到但它不会工作，因为我在div class =“filterOption filterSection”中有更多的子div并且需要选择最后一个父div class =“ filterOption filterSection“。

所以我最后在我的php代码中添加了一个空div，最后用我需要的css风格。

不好，但现在有效。

Answer 3

您可以尝试使用css3属性：

.filterOption.filterSection:nth-last-child(1);

Answer 4

您可以使用：last-of-type选择器，如您在此Fiddle

中所见

这样您就可以选择

<form id="filterForm">
    <p class="filterOption filterSection">NO</p>
    <p class="filterOption filterSection">NO</p>
    <p class="filterOption filterSection">NO</p>
    <p class="filterOption filterSection">ME!</p>
    <div class="blablabla"></div>
</form>

用这个css

.filterOption:last-of-type { color:red }

根据W3C，还有一个：last-child选择器，因为你可以检查HERE但它在JSFiddle中不起作用。

CSS - 在两个元素之间选择一个特定元素

4 个答案: