CSS 파생 선택기

[소개] 파생 선택기를 사용하면 요소 위치의 컨텍스트에 따라 스타일을 정의하여 마크업을 더욱 간결하게 만들 수 있습니다. CSS1에서는 이러한 방식으로 규칙을 적용하는 선택자를 상황별 선택자라고 합니다.

파생 선택자

에 응답하기 위해 컨텍스트에 의존하기 때문입니다. 요소 위치의 컨텍스트.

CSS1에서는 이러한 방식으로 규칙을 적용하는 선택자를 상황별 선택자라고 합니다. 규칙을 적용하거나 회피하기 위해 상황에 의존하기 때문입니다. CSS2에서는 파생 선택자라고 부르지만, 뭐라고 부르든 동일한 작업을 수행합니다.

파생 선택기를 사용하면 문서의 컨텍스트에 따라 태그 스타일을 지정할 수 있습니다. 파생 선택기를 신중하게 사용하면 HTML 코드를 더 깔끔하게 만들 수 있습니다.

예를 들어 목록의 Strong 요소를 일반적인 굵은 글꼴 대신 기울임꼴로 표시하려면 다음과 같이 파생 선택기를 정의할 수 있습니다.

li Strong {
글꼴 -style: italic;
font-weight: Normal;
}

로 표시된 파란색 코드의 내용을 참고하세요.

< ;p> ;목록에 없기 때문에 이탤릭체가 아닌 굵은 글씨로 표시했습니다. 따라서 이 규칙은 나에게 적합하지 않습니다

내 말은 이탤릭체로 되어 있습니다. 이는 Strong 요소가 Li 요소 안에 있기 때문입니다.

저는 일반 글꼴입니다.

위의 예에서는 li 요소의 Strong 요소만 이탤릭체로 표시되었으며 특별한 클래스를 정의할 필요가 없습니다. 또는 강한 요소에 대한 클래스를 사용하면 코드가 더 간결해집니다.

다음 CSS 규칙을 살펴보세요.

strong {
color: red;
}

h2 {
color: red;
}

h2 Strong {
color: blue;
}

영향을 주는 HTML은 다음과 같습니다.

여기서 강하게 강조된 단어는 다음과 같습니다. 단락은빨간색.

이 부제목도 빨간색입니다.

이 부제목에서 강하게 강조되는 단어는< 강함>파란색.

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