CSS - 选择元素之间的特定元素答案

【问题标题】：CSS - Select an specific element inbetween elementsCSS - 选择元素之间的特定元素
【发布时间】：2014-12-04 04:50:21
【问题描述】：

我正在尝试（并且也在此处搜索）选择特定元素但没有任何成功：

<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 的最后一个 div。我试过了：

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

知道如何实现这一点吗？帮助会很棒！

【问题讨论】：

CSS 选择器中没有:last-of-class pseudo class。因此，在 CSS 中没有通用的方法来选择具有特定类的最后一个元素。
您不能使用nth-of-anything按类进行选择。它只选择元素。根据您的特定结构的实际位置，可能有一个特定解决方案，但不会灵活。

标签： css select element

【解决方案1】：

感谢大家的帮助。

正如 Paulie_D 所说，它不会灵活，但我的代码是动态的 (div class="filterOption filterSection") 。正如 Hashem Qolami 所写，这是不可能的。

我也试过 :nth-last-child(1) as wong ian 和 ghorg12110 提到，但它不会工作，因为我在 div class="filterOption filterSection" 中有更多子 div 并且需要选择最后一个父 div class=" filterOption filterSection"。

所以我最终在我的 php 代码中添加了一个空 div，并在最后添加了我需要的 css 样式。

不好，但现在可以使用。

【讨论】：

【解决方案2】：

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

.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/

【讨论】：

【解决方案3】：

您可以使用 :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 中不起作用。

【讨论】：

【解决方案4】：

您可以尝试使用 css3 属性：

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

【讨论】：

像这样：.filterOption.filterSection:nth-last-child(1)