使用多个伪类/元素的元素的 CSS 路径不起作用答案

【问题标题】：CSS path to element using multiple pseudo-classes/elements not working使用多个伪类/元素的元素的 CSS 路径不起作用
【发布时间】：2016-11-21 14:34:32
【问题描述】：

我想知道是否可以通过堆叠伪类来定位元素。

我试过这个：

#advertise .row:first-of-type .one-third:nth-of-type(2) .contentwrap {
  font-size:16px;
}

但它仅在我们使用行的 ID [#one 或 #two] 代替 .row:first-of-type/.row:last-of-type 时才有效

这是因为我无法使用多个伪元素来定位元素，还是我只是在做一些愚蠢的事情而没有意识到？

这是 HTML：

<div id="advertise">
    <h1 class="maintitle"></h1>
    <h2 class="maintitle-sub"></h2>

    <div class="contentwrap">
        <p></p>
    </div>

    <div class="row" id="one">
        <div class="one-third first shadow">
            <h1 class="header"></h1>
            <div class="contentwrap">                
                <p></p>
            </div>
        </div>
        <div class="one-third shadow">
            <h1 class="header"></h1>
            <div class="contentwrap">
                <p></p>
            </div>
        </div>
        <div class="one-third shadow">
            <h1 class="header"></h1>
            <div class="contentwrap">
                <p></p>
            </div>
        </div>
    </div>

    <div class="row" id="two">
        <div class="one-third first shadow">
            <h1 class="header"></h1>
            <div class="contentwrap">                
                <p></p>
            </div>
         </div>
         <div class="one-third shadow">
            <h1 class="header"></h1>
            <div class="contentwrap">
                <p></p>
            </div>
        </div>
        <div class="one-third shadow">
            <h1 class="header"></h1>
            <div class="contentwrap">
                <p></p>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

James Donnelly 的回答已经涵盖了您的问题，但要非常清楚 - 以您尝试的方式“堆叠”伪选择器就可以了。
您的目标是针对特定的div.contentwrap 还是全部？
上面例子中提到的具体的——第一行第二个三分之一的.contentwrap。
只是一个评论，但它看起来像一个非常脆弱的选择器。我强烈建议找到一种更简单的方法来编写它，或者确保它在你的 cSS 中被注释，这样你就可以记住你试图定位的 WTH。
@RReveley：脆弱的选择器是什么意思？我正在使用#advertise #one .one-third:nth-of-type(2) .contentwrap.

标签： html css css-selectors pseudo-element pseudo-class

【解决方案1】：

:first-of-type 选择器选择特定类型元素的第一个实例（例如 <div>）。在这里，您的第一个 .row 元素是 second <div> 元素，因此您的 :first-of-type 选择器不会选择它。

相反，您可以使用：

#advertise .row:nth-of-type(2) .one-third:nth-of-type(2) .contentwrap {
  font-size:16px;
}

但由于它已经有一个id 属性（该属性应该是该元素独有的），您不妨坚持：

#advertise #one .one-third:nth-of-type(2) .contentwrap {
  font-size:16px;
}

【讨论】：

哦，我明白了。我的印象是它会选择 .row 的第一个实例，而不是 a/div 的第一个实例！
这个答案中的第一个建议有效，但对实际标记做了很多假设，这与基于类的样式应该如何工作相反。因反映有更好的方法而被投票赞成，但为了完整起见将其包括在内。