Question

有没有办法使用像:nth-of-type之类的伪类组合样式元素（例如div），这是整个文档中这个类的第n个出现？我的意思是不一定使用这个伪calss，而是任何方法来定位整个网站中的css类的特定出现而不是同一父。这是我的代码，显然不会这样做：

    <html>
    <head>
    <style>
       .a1:nth-of-type(1) div:nth-of-type(2) {background: red;}
       .a1:nth-of-type(n+3) div:nth-of-type(2) {background: yellow;}
    </style>
    </head>
    <body>
    <div>

    <div>
     <div class="a1">
      <div class="b1"><p>The first paragraph.</p></div>
      <div class="b1"><p>The second paragraph.</p></div>
      <div class="b1"><p>The third paragraph.</p></div>
      <div class="b1"><p>The fourth paragraph.</p></div>
     </div>
    </div>
    <br>

    <div>
     <div class="a1">
      <div class="b2"><p>The first paragraph.</p></div>
      <div class="b2"><p>The second paragraph.</p></div>
      <div class="b2"><p>The third paragraph.</p></div>
      <div class="b2"><p>The fourth paragraph.</p></div>
     </div>
    </div>
    <br>

    <div>
     <div class="a1">
      <div class="b3"><p>The first paragraph.</p></div>
      <div class="b3"><p>The second paragraph.</p></div>
      <div class="b3"><p>The third paragraph.</p></div>
      <div class="b3"><p>The fourth paragraph.</p></div>
     </div>
    </div>
    <br>

    <div>
     <div class="a1">
      <div class="b4"><p>The first paragraph.</p></div>
      <div class="b4"><p>The second paragraph.</p></div>
      <div class="b4"><p>The third paragraph.</p></div>
      <div class="b4"><p>The fourth paragraph.</p></div>
     </div>
    </div>

    </div>
    </body>
    </html>

以下是笔：http://codepen.io/kriana/pen/mOPrLd

谢谢！

Answer 1

您使用n+3的意图尚不清楚。看看这个：

：nth-child（an + b）CSS伪类匹配具有的元素   对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹   或n为零值，并具有父元素。更简单地说，   selector匹配数字位置的多个子元素   这一系列的孩子匹配模式an + b。

一些例子：

1n + 0，或简称为n，将匹配每个子元素。 n不匹配   在Android浏览器4.3及更低版本，而1n确实如此。 1n做同样的事情   事情为1n + 0。随意使用哪个看起来更好。 2n + 0，或   只需2n，就可以匹配子元素2,4,6,8等。你可以   甚至为此表达式替换关键字。 2n + 1会匹配   子元素1,3,5,7等。您可以将关键字odd替换为   这个表达。 3n + 4将匹配子元素4,7,10,13等。   值a和b必须都是整数，并且索引是   元素的第一个孩子是1.换句话说，这个类匹配所有   指数落在集合中的儿童{an + b; n = 0,1,2，...}。

参考 - :nth-child on MDN

:nth-child和:nth-of-type具有相同的语法。

更新：

您的代码存在的问题是:nth-of-type符合兄弟元素。那些.a1 div不是兄弟元素，因此每一个都被视为第一次出现。

在整个文档

1 个答案: