CSS 고급 구문

[소개] 선택자 그룹화 그룹화된 선택자가 동일한 명령문을 공유할 수 있도록 선택자를 그룹화할 수 있습니다. 그룹화해야 하는 선택기를 구분하려면 쉼표를 사용하세요. 아래 예에서는 모든 제목 요소를 그룹화했습니다. 모든 제목 요소는 녹색입니다. h1,h2,h3,h4,h5

선택자 그룹

선택자를 그룹화하여 그룹화된 선택자가 동일한 명령문을 공유할 수 있습니다. 그룹화해야 하는 선택기를 구분하려면 쉼표를 사용하세요. 아래 예에서는 모든 제목 요소를 그룹화했습니다. 모든 제목 요소는 녹색입니다.

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

상속과 그 문제

CSS에 따르면 하위 요소는 상위 요소로부터 속성을 상속받습니다. 하지만 항상 이런 식으로 작동하는 것은 아닙니다. 다음 규칙을 살펴보세요.

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

위 규칙에 따르면 사이트는 Verdana 글꼴을 사용합니다(해당 글꼴이 방문자의 시스템에 있는 경우).

CSS 상속을 통해 하위 요소는 최상위 요소(이 경우 body)가 소유한 속성(p, td, ul, ol, ul, li, dl, dt 및 dd). 추가 규칙은 필요하지 않습니다. 본문의 모든 하위 요소는 Verdana 글꼴과 하위 요소의 하위 요소를 표시해야 합니다. 그리고 대부분의 최신 브라우저에서는 실제로 그렇습니다.

그러나 브라우저 전쟁이 벌어지던 시대에는 표준 지원이 기업의 우선 순위가 아니었기 때문에 이것이 반드시 일어나지는 않았을 수도 있습니다. 예를 들어 Netscape 4는 상속을 지원하지 않으며 상속을 무시할 뿐만 아니라 body 요소에 적용되는 규칙도 무시합니다. IE/Windows에서는 IE6까지 테이블의 글꼴 스타일이 무시되는 관련 문제가 여전히 있습니다. 우리는 무엇을 해야 합니까?

Be Kind to Netscape 4

다행히 "Be Kind to Netscape 4" 규칙이라고 하는 중복성을 사용하여 이 작업을 수행할 수 있습니다. 상속을 이해할 수 없는 레거시 브라우저의 문제를 처리합니다.

본체 {
글꼴 계열: Verdana, sans-serif;
}

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

4.0 브라우저는 상속을 이해하지 못하지만 그룹 선택기는 이해합니다. 이는 일부 사용자의 대역폭을 낭비하게 되지만 Netscape 4 사용자를 지원해야 하는 경우에는 수행해야 합니다.

상속은 저주인가?

"Verdana, sans-serif" 글꼴이 모든 하위 요소에 상속되는 것을 원하지 않으면 어떻게 해야 합니까? 단락의 글꼴을 Times로 지정한다고 가정해 보겠습니다. 괜찮아요. p에 대한 특수 규칙을 생성하여 상위 요소의 규칙을 제거합니다:

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

td , ul, ol, ul, li, dl, dt, dd {
글꼴 계열: Verdana, sans-serif;
}

p {
글꼴 계열: Times, " Times 뉴로만", serif;
}

위 내용은 CSS 고급 구문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!