0

私はこれに沿って何かを持っています

<div class="menu" style="background-color: transparent;">
 <div class="button">
  <div class="divider" style="background-color: transparent;"></div>
  <a id="apple" class="unselect select" href="/apple">
   <span class="apple1">Apple</span>
  </a>
 </div>
 <div class="button">
  <div class="divider"></div>
  <a id="orange" class="unselect" href="/orange">
   <span class="orange1">Orange</span>
  </a>
 </div>
 ....

これにより、最初の除算器が得られます

css=div.menu div.button div.divider

2番目の仕切りにアクセスしようとしています。ボタンにもアクセスする必要があります。n番目の子のものを読んでみましたが、IEと互換性がないことに気付きました。

(特定のクラス/ID を持つ) 要素の下で (特定のクラス/ID の) 2 番目/3 番目の子または子孫を見つけるための CSS セレクターはありますか?

現在xPathを使用しています

//div[@class='menu']/descendant::div[contains(@class,'divider')][2]

動作しますが、これを CSS に移行したいと考えています。

4

2 に答える 2

2

隣接する兄弟セレクター はそれ+を行うことができ、IE7+ と互換性があります。

4 つのボタンでの使用方法を示す Fiddle: http://jsfiddle.net/AgNwu/
(すでにどこでも id/class に依存している場合は、「div」は必要ありません。何かを「ボタン」と呼ぶ場合は、それがリンクであることを期待してください。 input[type="submit|image|button|reset"] またはボタン要素 ;) )

CSS

.menu > .button {
    border: 1px solid darkblue;
    padding: 10px;
    margin: 5px 0;
}

.menu > .button + .button .divider {
    background: Tan;
}
.menu > .button + .button .divider:after{
    content: " (2nd or more)";
}

.menu > .button + .button + .button .divider {
    background: yellow;
}
.menu > .button + .button + .button .divider:after{
    content: " (3rd or more)";
}

編集：隣接する兄弟、これは兄弟対一般的な兄弟だと思いました。ノード/要素の間に他のタイプのノードがある場合は、 （一般的な兄弟）
に置き換えることができます。これは、IE7+ でも動作するのと同等です。+~.button:nth-of-type

于 2012-04-19T05:25:51.587 に答える
1

次のように書くことができます。

div.menu div.button + div.button div.divider{
 color:red;
}
于 2012-04-19T05:16:21.590 に答える