CSS 스타일 충돌이 발생하면 어떻게 해야 할까요?

해결책: 1. 선택기를 구체화하고 선택기 설명을 더 정확하게 작성합니다. 2. 선택기 이름을 다시 작성합니다. 3. CSS 스타일 시트에서 순서를 변경합니다. 4. 필요할 때 적극적으로 우선순위를 높입니다. "!important; "사용된 스타일 뒤에.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. 선택기 구체화

예를 들어 다음 코드 스니펫의 경우 .apple에 스타일을 추가하려는 경우 결합기(Combinator)를 사용하여 선택기 설명을 더 정확하게 작성합니다. 휴대폰에서는 .apple만 사용하면 필연적으로 .fruit의 .apple에 영향을 미칩니다.

<div class="cellphones">
  <div class="apple"></div>
</div>
<div class="fruit">
  <div class="apple"></div>
</div>

Descendant Combinator 또는 Child Combinator에 대한 보다 정확한 설명을 사용할 수 있습니다. 설명이 정확할수록 우선순위가 높아지고, 우선순위가 높은 설명이 우선순위가 낮은 설명보다 우선 적용됩니다.

/* 后代组合器：所有后代节点 */
.cellphones .apple {
	border: 1px solid black;
}

/* 更加精确的后代组合器 */
body .cellphones .apple {
  border: 1px solid blue;
}

/* 子代组合器：直接子节点 */
.cellphones > .apple {
  border: 1px solid red;
}

위 스타일을 모두 .apple에 순서대로 추가하면 결국 테두리가 파란색으로 나타나게 됩니다.

자세한 우선순위 규칙은 CSS 우선순위를 참조하세요.

2. 선택기 이름을 다시 작성하는 것은

본질적으로 이전 상황의 특별한 경우입니다. 예를 들어 .apple의 경우 다음 스타일을 추가합니다.

.cellphones > .apple.apple {
  border: 1px solid purple;
}
.cellphones > .apple {
  border: 1px solid red;
}

결국 테두리가 보라색으로 표시됩니다.

3. CSS 스타일 시트에서 순서를 변경하세요

동일한 유형의 선택기로 지정된 스타일의 경우 CSS 파일의 이후 스타일이 이전 스타일을 덮어씁니다. 예를 들어, 다음 코드의 div 요소의 경우 브라우저 렌더링 결과는 빨간색입니다.

<div class="redBorder" class="blackBorder"></div>

.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}

HTML 파일에서는 .blackBorder가 .redBorder 뒤에 표시되지만 우선순위는 HTML 파일의 위치 순서에 따라 판단됩니다. CSS 파일. 즉, CSS 파일의 뒷부분에 있는 .redBorder만 사용됩니다.

4. 적극적으로 우선순위 높이기(권장하지 않음)

간단하고 투박하지만 권장하지 않는 방법도 있는데, 스타일 우선순위를 높이기 위해 사용해야 하는 스타일 뒤에 !important 키워드를 추가하는 것입니다. 매우 높은 수준입니다. 예:

<div class="redBorder" class="greenBorder"></div>

.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}

위 코드를 사용하면 테두리가 녹색으로 나타납니다.

!important를 사용하는 것은 스타일 시트에 내재된 계단식 규칙을 깨뜨리고 디버깅을 매우 어렵게 만드는 매우 나쁜 습관입니다!

추천 학습: css 비디오 튜토리얼

위 내용은 CSS 스타일 충돌이 발생하면 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!