0

css(>) の直接の子セレクターは、直接の子孫を選択して色を渡しますが、テキスト装飾に関しては、他の要素も選択します。どうして？

http://codepen.io/anon/pen/dDJmE

色については、直系の子孫のみが選択されていることがわかりますが、テキスト装飾の動作が正しくないのはなぜですか? 私は何が欠けていますか？

CSS

li {
  text-decoration: none;
  color: black;
}
ol.numbers > li {
  text-decoration: underline;
  color: red;
}

HTML

  <ol class="numbers">
    <li> First! </li>
    <li> Second! 
       <ul>
        <li> hehe </li>
        <li> huhu 
          <ol>
            <li> nested! </li>
          </ol>
         </li>
      </ul>
    </li>
    <li> Third! </li>
    <li> Fourth! 
      <ol>
       <li> oh lala </li>
      </ol>
    </li>

   </ol>
4

2 に答える 2

2

マークアップ：

<div>

  <ol class="numbers">
    <li> First! </li>
    <li> Second! 
       <ul>
        <li> hehe </li>
        <li> huhu 
          <ol>
            <li> nested! </li>
          </ol>
         </li>
      </ul>
    </li>
    <li> Third! </li>
    <li> Fourth! 
      <ol>
       <li> oh lala </li>
      </ol>
    </li>

   </ol>

  <ol class="letters">
    <li> A </li>
    <li> B </li>
  </ol>

（非特定の）子olとそれぞれliの子は、任意の内の任意のテキストコンテンツに適用されるスタイルの対象にすぎませんol.numbers>li。ol指定されていない子とlisが継承しているスタイルをオーバーライドする必要があります。ol.numbers>li liセレクターとしてこれを行うことができます。

添加

テキスト装飾が他のテキストスタイリングメカニズムと一致していないことについて私は正しかったようです：このCSSテキスト装飾オーバーライドを機能させるにはどうすればよいですか？

この問題には別の方法でアプローチする必要があります。テキストを適切なタグ（ps、spansなど）でラップし、CSSで具体的にアドレス指定して、目的の結果を得るようにすることをお勧めします。

于 2013-03-02T22:22:03.823 に答える
1

これは、CSS がスタイルを適用する順序によるものです。 ol.numbers > liより具体的ですli。そのため、そのスタイルが優先されます。

于 2013-03-02T22:10:58.837 に答える