if/else 문을 사용하지 않고 CSS에서 조건부 스타일을 어떻게 구현할 수 있나요?

<p>

<p>CSS의 조건부 스타일링: if/else 그 이상

<p>CSS에서는 전통적인 if/else 문이 조건부 스타일링에 매력적으로 보일 수 있습니다. 그러나 이는 기본적으로 지원되지 않습니다. 대신 대체 접근 방식을 고려하세요.

<p>클래스 기반 스타일 지정:

<p>HTML 요소에 클래스를 할당하고 그에 따라 스타일 규칙을 정의하세요. 예:

<p>

<p>CSS에서:

p.normal { background-position: 150px 8px; }
p.active { background-position: 4px 8px; }

<p>CSS 전처리기:

<p>Sass와 같은 전처리기를 사용하여 조건문을 도입합니다.

$type: monster;
p {
  @if $type == ocean { color: blue; }
  @else if $type == matador { color: red; }
  @else if $type == monster { color: green; }
  @else { color: black; }
}

<p>전처리기에는 전처리가 필요하며 조건은 다음과 같습니다. 컴파일 시간에 평가됩니다.

<p>사용자 정의 속성:

<p>런타임 평가를 위해 사용자 정의 CSS 속성(CSS 변수) 활용:

:root { --main-bg-color: brown; }
.one { background-color: var(--main-bg-color); }
.two { background-color: black; }

<p>서버측 전처리:

<p>다음을 사용하여 스타일시트를 전처리합니다. PHP와 같은 서버측 언어:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

<p>기타 기술:

<p>if/else 없이 조건부 스타일을 처리하는 고급 CSS 기술에 대한 Ahmad Shadeed의 기사를 참조하세요. .

위 내용은 if/else 문을 사용하지 않고 CSS에서 조건부 스타일을 어떻게 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!