CSS 파생 선택기를 사용하는 방법

CSS 파생 선택기 사용 방법: 파생 선택기를 사용하면 문서의 컨텍스트에 따라 특정 태그의 스타일을 결정할 수 있습니다. 파생 선택기를 합리적으로 사용하면 HTML 코드를 더욱 깔끔하게 만들 수 있습니다.

(권장 튜토리얼: css 비디오 튜토리얼)

CSS 파생 선택기 사용 방법:

해당 위치에 있는 요소의 컨텍스트를 기반으로 스타일을 정의하면 마크업을 더욱 간결하게 만들 수 있습니다. .

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

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

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

li strong {
    font-style: italic;
    font-weight: normal;
  }

<strong></strong>로 표시된 파란색 코드의 컨텍스트에 유의하세요.

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

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

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

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

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

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2 id="This-nbsp-subhead-nbsp-is-nbsp-also-nbsp-red">This subhead is also red.</h2>
<h2 id="The-nbsp-strongly-nbsp-emphasized-nbsp-word-nbsp-in-nbsp-this-nbsp-subhead-nbsp-is-strong-blue-strong">The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

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