リスト要素が親からスタイルを継承していない

'li'要素が次のスニペットの 'p'要素スタイルを継承しない理由は何ですか？ '' Hello world！ 'の間、' role1 'と' role2 'は黒色にレンダリングされます。と 'inside nested p'は青色で表示されます。リスト要素が親からスタイルを継承していない

<!DOCTYPE html> 
<html> 
    <title>test</title> 
    <head> 
     <style type="text/css"> 
     p { 
      color: blue; 
     } 
     </style> 
    </head> 
    <body> 
     <p> 
      Hello World ! 
      <ol> 
       <li>role1</li> 
       <li>role2</li> 
      </ol> 
      <p> 
       Inside nested p 
      </p> 
     </p> 
    </body> 
</html>

出典

2012-02-17 Anonymous

あなたのスタイルの説明を変更して、リスト要素を青色にします。私の答えをチェックしてください。 – Juvanis

pタグにブロックレベル要素を含めることはできません。ブラウザが自動的にpタグを閉じます。あなたのHTMLは次のように解析します：

<!DOCTYPE html> 
<html> 
    <title>test</title> 
    <head> 
     <style type="text/css"> 
     p { 
      color: blue; 
     } 
     </style> 
    </head> 
    <body> 
     <p> 
      Hello World ! 
     </p> 
      <ol> 
       <li>role1</li> 
       <li>role2</li> 
      </ol> 
      <p> 
       Inside nested p 
      </p> 
    </body> 
</html>

をそして今、あなたが見る、なぜこんにちは、内部にネストされたP青であり、LI要素がありません

出典

2012-02-17 09:38:10

ありがとうございました！私はhtml/cssブロックレベルのインライン要素についてもっと学ぶ必要があります。 –

スタイルの説明に独自のカスタムタグやクラスを使用してみてください：

<!DOCTYPE html> 
<html> 
    <title>test</title> 
    <head> 
     <style type="text/css"> 
     custom { 
      color: blue; 
     } 
     </style> 
    </head> 
    <body> 
     <custom> 
      Hello World ! 
      <ol> 
       <li>role1</li> 
       <li>role2</li> 
      </ol> 
      <p> 
       Inside nested p 
      </p> 
     </custom> 
    </body> 
</html>

出典

2012-02-17 09:42:34 Juvanis

ヤ、リック・ホーキングが正しい。すべてのpやolに青色を適用したい場合は、以下のようにdivブロック/コンテナに配置する必要があります。

<!DOCTYPE html> 
<html> 
    <title>test</title> 
    <head> 
     <style type="text/css"> 
     div { 
      color: blue; 
     } 
     </style> 
    </head> 
    <body> 
    <div> 
     <p> 
      Hello World ! 
      <ol> 
       <li>role1</li> 
       <li>role2</li> 
      </ol> 
      <p> 
       Inside nested p 
      </p> 
     </p> 
    </div> 
    </body> 
</html>

出典

2012-02-17 09:45:52 Jak

リスト要素が親からスタイルを継承していない

答えて

関連する問題