-1

これは私を困惑させました...

ここでJSBINを参照してください

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    .slide-nav:nth-of-type(1) { color:red } /* this should select the number 1 */
</style>
</head>
<body>

  <div class="image">
    <span class="slide" data-order="4" rel="content-images/teta.jpg" ></span>
    <span class="slide" data-order="3" rel="content-images/champ.jpg" ></span>
    <span class="slide" data-order="2" rel="content-images/clouds.jpg" ></span>
    <img class="slide initial" data-order="1" src="content-images/air.jpg" />
    <span class="spinner"></span>

    <!--  
    delete this line to comment the two arrow links -->
    <a class="arrow next" href="javascript:void(0)">&rarr;</a>
    <a class="arrow prev" href="javascript:void(0)">&larr;</a>
    <!-- -->

    <a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
    <a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
    <a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
    <a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
  </div>


</body>
</html>

質問

.slide-nav:nth-of-type(1) { color:red }番号の上にある 2 つの追加リンクが削除されたときにのみ機能するのはなぜですか?

jsbin で、2 つの矢印を削除するか、コメント行を削除してそのブロックにコメントを付けると、.slide-nav:nth-of-type(1)セレクターが魔法のように機能することがわかります。

私の人生では、関係なく機能するはずです。ここで何が欠けていますか？

4

1 に答える 1

5

CSS には :nth-of-class() セレクターがないため、クラスによるフィルターはありません。:nth-of-typeフィルターはタグ上にある必要があります。

回避策は、slide-nav リンクをスパン内にラップaし、CSS 内のすべての をフィルタリングすることです。

<span class="numbers">
    <a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
    <a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
    <a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
    <a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
</span>

そして、CSS

span.numbers a:nth-of-type(1) { color:red; } /* this should select the number 1 */

例については、http://jsfiddle.net/3J4K6/を参照してください。

于 2012-10-07T08:14:14.260 に答える