CSS 고급 문법

선택자 그룹화

선택자를 그룹화할 수 있습니다. 그룹화된 선택자는 공통된 선언을 공유할 수 있습니다. 필요한 선택자를 콤마로 분리합니다. 아래의 예제에서는 모든 제목 요소를 그룹화했습니다. 모든 제목 요소는 녹색입니다.

h1,h2,h3,h4,h5,h6 {
  color: green;
  {}

상속 및 문제

CSS에 따르면 자식 요소는 부모 요소에서 속성을 상속합니다. 하지만 이렇게 항상 작동하지 않습니다. 아래의 규칙을 보세요:

body {
     font-family: Verdana, sans-serif;
     {}

위 규칙에 따라, 사이트의 body 요소는 Verdana 글꼴을 사용합니다(방문자의 시스템에 이 글꼴이 존재하는 경우).

CSS 상속을 통해 자식 요소는 최고 등급 요소(이 예제에서는 body)가 가지고 있는 속성을 상속합니다(이러한 자식 요소는 p, td, ul, ol, ul, li, dl, dt, 및 dd와 같습니다). 추가적인 규칙이 필요하지 않으며, 모든 body의 자식 요소는 Verdana 글꼴을 표시해야 하며, 자식 요소의 자식 요소도 마찬가지입니다. 그리고 대부분의 현대 브라우저에서는 이렇게 합니다.

그러나 그浏览器 전쟁의 혈세 시대에 이런 일은 일어날 수 없었고, 당시 표준 지원은 기업의 최우선 선택이 아니었습니다. 예를 들어, Netscape 4는 상속을 지원하지 않으며, 상속을 무시하고 body 요소에 적용되는 규칙도 무시합니다. IE/Windows는 IE6까지 이 문제가 있었으며, 테이블 내의 글자 스타일은 무시됩니다. 그렇다면 우리는 어떻게 해야 하나요?

친절하게 대하다 Netscape 4

운이 좋게는, "Be Kind to Netscape 4"라고 불리는 중복 규칙을 사용하여 오래된 브라우저가 상속을 이해하지 못하는 문제를 처리할 수 있습니다.

body  {
     font-family: Verdana, sans-serif;
     {}
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     {}

4.0 브라우저는 상속을 이해할 수 없지만, 그들은 그룹 선택자를 이해할 수 있습니다. 이렇게 하면 사용자의_bandwidth를 낭비할 수 있지만, Netscape 4 사용자를 지원해야 할 때는 이렇게 해야 합니다.

상속은 저주인가요?

모든 자식 요소에 "Verdana, sans-serif" 글꼴이 상속되지 않도록 원하지 않으면 어떻게 해야 하나요? 예를 들어, 단락의 글꼴이 Times인 경우에요. 문제없습니다. p에 대한 특별한 규칙을 만들어서 그것이 부모 요소의 규칙을 벗어날 것입니다:

body  {
     font-family: Verdana, sans-serif;
     {}
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     {}
p  {
     font-family: Times, "Times New Roman", serif;
     {}