NO

Question

匹配元素的第n个是否有CSS选择器，无论父母是谁。

e.g。在下面如何选择＆＃34;第二段。＆＃34;还没有第四个？

cd cordova/ #change to root cordova folder
platforms/android/cordova/clean #clean if you want
cordova build android --release -- --keystore="/path/to/keystore" --storePassword=password --alias=alias_name #password will be prompted if you have any

我认为p：nth-oftype（2）会这样做但是同时选择第二个和第四个（这是每个父div的第二个）。

JSFiddle - https://jsfiddle.net/km4nbfz9/

编辑 - 这只是HTML的一个例子，问题是如何使第一个匹配CSS选择器的元素工作，无论父母和结构如何。

Answer 1

NO

spec说：

：nth-child（an + b）伪类表示法表示在文档树中具有+ b-1 兄弟的元素， n的任何正整数或零值，并且具有父元素。

没有 nth-of-DOM 选择器。

这里的操作词是兄弟姐妹 ..这需要父母，而不是叔叔或祖父母等。

正如@Marcos Pérez Gude

的评论所述

“DOM是一棵树。所以如果你考虑一下，节点总是依赖于它的父节点。”

Answer 2

尝试：

div:nth-of-type(1) p:nth-of-type(2) {
    background: red;
}

Answer 3

    div:first-of-type p:nth-of-type(2) {
        background: red;
    }

Answer 4

        <div class="highlight">
       <p>The first paragraph.</p>
       <p>The second paragraph.</p>
    </div>

    <div>
       <p>The third paragraph.</p>
       <p>The fourth paragraph.</p>
    </div>

将class或id添加到div以仅突出显示the second paragraph并使用class或id，否则您必须设置样式，否则div中的每个第2个元素将突出显示

 .highlight p:nth-child(0n+2) {
background: red;
}

无论父级如何，第n个元素的CSS选择器

4 个答案:

NO