CSS에서 조건부 논리를 어떻게 시뮬레이션할 수 있나요?

CSS에서 조건부 논리를 사용할 수 있나요?

If-else 조건은 CSS에서 기본적으로 지원되지 않습니다. 그러나 유사한 기능을 구현하는 방법에는 여러 가지가 있습니다.

CSS 클래스:

HTML을 제어할 수 있는 경우 CSS 클래스를 사용하여 기반에 따라 다양한 스타일을 적용할 수 있습니다. 변수에. 예:

<p class="normal">Text</p>
<p class="active">Text</p>

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

CSS 전처리기(예: Sass):

CSS 전처리기를 사용하면 조건문을 포함한 제어 구조를 사용할 수 있습니다. 예를 들어, Sass:

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

CSS 사용자 정의 속성:

사용자 정의 속성은 지원되는 브라우저에서 런타임에 평가될 수 있습니다. 이를 사용하여 조건에 따라 스타일을 설정할 수 있습니다.

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

서버측 전처리:

서버측 언어로 스타일시트를 전처리할 수도 있습니다. 예를 들어, PHP에서는:

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

기타 기술:

더 복잡한 시나리오의 경우 "If/ CSS의 Else' 작성자: Ahmad Shadeed.

위 내용은 CSS에서 조건부 논리를 어떻게 시뮬레이션할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!