2012-02-17 2 views
0

'li'요소가 'sn'요소에서 'p'요소 스타일을 상속받지 못하는 이유는 무엇입니까? ''Hello world! '는'role1 '과'role2 '가 검은 색으로 렌더링됩니다. 및 'Inside pested'는 파란색으로 표시됩니다.목록 요소가 부모로부터 스타일을 상속받지 않는다

<!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> 
+0

목록 요소를 파란색으로 렌더링하려면 스타일 설명을 변경하십시오. 내 대답을 확인하십시오. – Juvanis

답변

2

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 파란색과 리튬 요소가없는

+0

고마워!. html/css 블록 레벨 인라인 요소에 대해 자세히 알아야합니다. –

2

스타일의 설명에 사용자 정의 태그 또는 클래스를 사용해보십시오 :

<!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> 
3

예, Rick Hoving이 맞습니다. 당신이 모든 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> 
관련 문제