html - この CSS テキスト装飾のオーバーライドを機能させるにはどうすればよいですか?

Question

気が狂うと断言する日もある。これはそれらの日のうちの1つです。私のCSSはここではかなり単純だと思っていましたが、うまく機能していないようです. 私は何が欠けていますか？

私のCSSは次のようになります。

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

そして私のHTMLは次のようになります：

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

それでも、次のようになります。

Answer 1

text-decorationのような他のフォント/テキスト関連のスタイリングと同じように動作しませんfont-weight。適用するtext-decorationと、ネストされたすべての要素にも影響します。

これをチェックしてください： http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

抜粋：

インライン ボックスのテキスト装飾は、要素全体に描画され、その存在に注意を払うことなく、子孫要素を横断します。子孫要素の 'text-decoration' プロパティは、要素の装飾に影響を与えることはできません
。. . .
一部のユーザー エージェントは、上記のように単純に要素を介して装飾を描画するのではなく、子孫要素に装飾を伝播することによってテキスト装飾を実装しています。これは、CSS2 のより緩い文言によって許可されていたことに間違いありません。

http://csscreator.com/node/14951から情報を入手しました。

Answer 2

text-decorationこれらの場合、親要素に適用されたものを取り除きます:

• フロート要素や絶対配置要素などのフロー外要素

  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  ul { overflow: hidden; } /* Clearfix */
  

  ul {
    overflow: hidden; /* Clearfix */
  }
  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

• インライン ブロックやインライン テーブルなどのアトミック インライン レベル要素

  しかし、 を使用するli{display:inline-block}と、弾丸がなくなり ( を失いますdisplay:list-item)、アイテムが他のアイテムの隣に表示されます。

  次に、1行に1つのアイテムを含めるには、次を使用できます

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  

  ::before箇条書きを追加するには、疑似要素を使用できます。ただし、箇条書きには下線を引くべきではないため、箇条書きをアウト オブ フローにするか、アトミック インライン レベルにする必要があります。

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '• ';         /* Insert bullet */
    display: inline-block; /* Avoid text-decoration propagation from li */
    white-space: pre-wrap; /* Don't collapse the whitespace */
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '•';          /* Insert bullet */
    position: absolute;    /* Avoid text-decoration propagation from li */
    margin-left: -.75em;
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

---

この動作は、CSS 2.1およびCSS テキスト装飾モジュール レベル 3で指定されています。

テキスト装飾は、アウトオブフローの子孫にも、インライン ブロックやインライン テーブルなどのアトミック インライン レベルの子孫のコンテンツにも伝播されないことに注意してください。

Answer 3

あなたが見ているものを見ている理由は、あなたのルールです

ul > li.u

以下よりも優先されます:

ul > li > ul > li

クラスが指定されており、要素セレクターを合わせたものよりも重みがあります。

編集：あなたが試すことができるのは：

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

それをいじってみてください（おそらく、単に .u の代わりに li.u を使用する必要があります）。

ただし、コンテンツによっては、クラスを使用する代わりに、下線部分をq、emまたはstrongタグで囲み、これらのタグのスタイルを設定したい場合があります。そうすれば、コンテンツを説明するだけでなく、スタイルを設定することもできます。

Answer 4

上記のokwの回答は、他の変更を加えないと、求めていることを実行できない理由を完全に説明しています。いいえ、あなたは怒っていません！

考えられる回避策:

• 試してみborder-bottomますか？
• 下線を引くテキストをspan class="u"タグで囲みますか? （テキスト装飾がネストされた要素を装飾するのを防ぐため）
• マークアップを変更できない場合は、以前の提案と同じことを達成するためにスクリプトを追加できます。

頑張ってください！

Answer 5

.u {text-decoration: underline;}