CSS 使用多个 pseudo-classes/elements 的元素路径无效

Question

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

我试过这个：

#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>

Answer 1

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

相反，您可以使用：

#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;
}

CSS 使用多个 pseudo-classes/elements 的元素路径无效

CSS path to element using multiple pseudo-classes/elements not working

html

css

css-selectors

pseudo-class

pseudo-element