1

以下のリストでは、私が使用しようとした（最初の親）のように親リストのスタイルを設定したい：

  ul < li {
    background-color: yellow;
  }

これは機能しません。どうすればできますか?

    <ul>
  <li>first parent <!-- style this -->
    <ul>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
    </ul>
  </li>
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
</ul>
4

4 に答える 4

2

誰かが検索エンジンからこれを見つけた場合に備えて、ここで明確にしましょう: CSS には親セレクターはなく、CSS3 にもありません。

このチュートリアルを確認してください。

これについての議論は次のとおりです: CSS親セレクターはありますか?

于 2013-06-17T08:23:55.373 に答える
2

CSS で親をターゲットにすることはできません。それにクラスを追加して、そのように使用するだけです。

<li class="highlight">

-

.highlight {
    background-color: yellow;
}

または、その特定の li をその親での位置によって指定します。

li:nth-child(5) { /* assuming it's the 5th <li> in that list */
    background-color: yellow;
}
于 2013-06-17T08:20:55.753 に答える
0

次のように「最初のレベル」を識別するためにクラスを適用する必要があります。

<ul class="firstLevel">
  <li>first parent <!-- style this -->
    <ul>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
    </ul>
  </li>
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
</ul>

次に css を適用します。

/* ">" means only first level childs "li" will be concerned */
ul.firstLevel > li { 
  background-color: yellow;
}
于 2013-06-17T08:21:17.387 に答える
0

うーん、クラスを使用できます。

または、両方を次のようにスタイルします。

ul li { background-color: yellow; }
ul li ul li { background-color: none; }

Idはおそらくクラスを使用します

于 2013-06-17T08:21:10.033 に答える