2

次のコードをテストしましたが、同じ HTML 構造がリストで機能しない理由がわかりません。すべてが正常に動作するdivコンテナ内。内部クラスpのみが取得します。しかし、 a 内の同じ構造は機能しません。要素もクラス内にあるのはなぜですか?p.level1boldulli.level2bold

<ul class="level1">
  <li>Level 1</li>
  <li>Level 1</li>
  <li>Level 1
    <ul class="level2">
      <li>Level 2</li>
      <li>Level 2</li>
      </ul>
  </li>
  <li>Level 1</li>
</ul>


<div class="level1">
  <p>Level 1</p>
  <p>Level 1</p>
  <p>Level 1
    <div class="level2">
      <p>Level 2</p>
      <p>Level 2</p>
    </div>
  </p>
  <p>Level 1</p>
</div>

.level1 > li {
 font-weight: bold;
}

.level1 > p {
  font-weight: bold;
}
4

3 に答える 3

0

here で<div>説明されているように、要素内に要素を含む例<p>は無効です。W3C もここで指定します。

P 要素は段落を表します。ブロック レベルの要素 (P 自体を含む) を含めることはできません。

要素はブロック レベルの要素であるため<div>、要素内に配置することはできません<p>。だから...二度とそれをしないでください。

あなたの問題に。アイテムを使用した例は<li>、仕様に従って完璧に機能します。セレクター.level1 > liは li 要素を正しく選択しますが、<li>Level 2</li>要素は単にプロパティを継承しfont-weightます。CSSルールを追加する必要があります

.level2 > li {
    font-weight:initial;
}

または、必要に応じて別の値に設定します。

于 2015-04-07T10:42:04.333 に答える
0

あなたのコードでは、 ul .level1の li を含むクラスで ul からすべての li のタグをタグ付けしてい.level2ます。これを修正するには、ul の li を再ターゲットして.level2を返しfont-weight : 400 //or normalます。これを参照してください:
http://jsfiddle.net/ rsm23/s3CmF/

私があなたを助けたことを願っています

于 2013-08-11T00:51:28.807 に答える
0 
<ul class="level1">
  <li>Level 1</li>
  <li>Level 1</li>
  <li>Level 1               // Started here because of this 
    <ul class="level2">     // class2 ul elements are considered as li of class1
      <li>Level 2</li>
      <li>Level 2</li>
      </ul>
  </li>                   
  <li>Level 1</li>
</ul>

ここでは、2 番目の質問ですが、

@defau1t の回答を追加したいと思います:つまり、開始タグが要素を自動的に閉じるため、DOMの a 内に要素を配置
することはできません。<div><p><div><p>

<div class="level1">
  <p>Level 1</p>
  <p>Level 1</p>
  <p>Level 1                 //P tag can't have div tag inside it.  
    <div class="level2">     //Hence it didn't worked
      <p>Level 2</p>
      <p>Level 2</p>
    </div>
  </p>
  <p>Level 1</p>
</div>
于 2013-08-10T11:50:41.723 に答える