1

ネストされた UL と LI で構成されるメニューがあります。例:

.wrapper > ul:first-child > li:last-child {
  color: red;
}
<div class="wrapper">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolar</li>
    <li>Style me!
      <ul>
        <li>Lorem</li>
        <li>Don't style me!</li>
      </ul>
    </li>
  </ul>
</div>

<li>最初の の最後にスタイルを追加したいのですが、その子 (ネストされた) にスタイルを継承<ul>させません。<ul>

私が試してみました：

.wrapper > ul:first-child > li:last-child {/*styles*/}

しかし、これはまだ最後の要素をスタイルしています。

その1つの要素だけを（CSSだけで）ターゲットにする方法を知っている人はいますか？

4

1 に答える 1

3

一部の CSS プロパティは継承されており、これを防ぐことはできません。

継承は、親要素から子要素にプロパティ値を伝達します。

一部のプロパティは、プロパティ定義テーブルで定義されているように、継承されたプロパティです。これは、カスケードの結果が値にならない限り、その値は継承によって決定されることを意味します。

ただし、子を選択して目的の値を復元することで、それをオーバーライドできます。

.wrapper > ul:first-child > li:last-child {
  color: red;
}
.wrapper > ul:first-child > li:last-child > * {
  color: initial;
}
<div class="wrapper">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolar</li>
    <li>Style me!
      <ul>
        <li>Lorem</li>
        <li>Don't style me!</li>
      </ul>
    </li>
  </ul>
</div>

于 2017-01-09T04:04:53.947 に答える