다른 CSS 클래스를 사용하여 CSS 클래스의 속성을 재정의하는 방법

저는 CSS3를 처음 접했으며 다음을 수행 할 수 있기를 원합니다.

요소에 클래스를 추가하면이 특정 요소에 사용 된 다른 클래스의 속성이 무시됩니다.

내가 가지고 있다고하자

<a class="left carousel-control" href="#carousel" data-slide="prev">

클래스 bakground-none의 기본 배경을 재정의 하는 클래스를 추가 할 수 있기를 원합니다 left.

감사!

속성을 재정의하는 방법에는 여러 가지가 있습니다. 당신이 가지고 있다고 가정

.left { background: blue }

예를 들어 다음 중 하나가이를 재정의합니다.

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

처음 두 개는 선택자 특이성에 의해 "승리"합니다. 세 번째 !important는 뭉툭한 악기로 이깁니다 .

스타일 시트를 구성하여 예를 들어 규칙

.background-none { background: none; }

있는 것만으로 즉 순서에 의해 승리 후 달리 똑같이 "강력한"규칙입니다. 그러나 이것은 제한을 부과하고 스타일 시트를 재구성 할 때주의해야합니다.

이것들은 모두 중요하지만 널리 오해되고있는 개념 인 CSS Cascade의 예입니다 . 스타일 시트 규칙 간의 충돌을 해결하기위한 정확한 규칙을 정의합니다.

PS 내가 사용 left했고 background-none질문에 사용되었습니다. 구조적 또는 의미 론적 역할이 아닌 특정 렌더링을 반영하므로 사용 해서는 안되는 클래스 이름의 예입니다 .

그냥 사용 !important이 오버라이드 (override)하는 데 도움이 될 것입니다

background:none !important;

그것은 나쁜 관행이라고되어 있지만, !important유틸리티 클래스에 유용 할 수 있습니다, 당신은 단지 책임감을 사용할 필요,이를 확인 : 중요한 사용할 때 올바른 선택이다

important키워드 대신 선택기를 더 구체적으로 만들 수 있습니다. 예를 들면 다음과 같습니다.

.left.background-none { background:none; }

(참고 : 클래스 이름 사이에는 공백이 없습니다.)

이 경우 규칙은 순서 또는 근접성에 관계없이 클래스 속성에 .left및 둘 다 .background-none나열 될 때 적용됩니다 .

스타일의 특이성 을 높여 재정의해야 합니다. 특이성을 높이는 방법에는 여러 가지가 있습니다. !important어떤 효과 특이성을 사용 하는 것은 스타일 시트에서 자연스러운 계단식을 깨뜨리기 때문에 나쁜 습관 입니다.

css-tricks.com 에서 가져온 다음 다이어그램 은 포인트 구조를 기반으로 요소에 대한 올바른 특이성을 생성하는 데 도움이됩니다. 더 높은 점수를 가진 특이성이 승리합니다. 게임처럼 들리지 않습니까?

css-tricks.com 에서 샘플 계산을 확인하세요 . 이것은 개념을 아주 잘 이해하는 데 도움이되며 2 분 밖에 걸리지 않습니다.

다른 특이성을 직접 생성 및 / 또는 비교 하려면 https://specificity.keegan.st/의 특이성 계산기를 사용하거나 전통적인 종이 / 연필을 사용할 수 있습니다.

자세한 내용은 MDN Web Docs를 참조하십시오 .

사용하지 않는 것이 가장 좋습니다 !important.

bakground-none다른 클래스 다음에 클래스 를 나열하면 해당 속성이 이미 설정된 속성을 재정의합니다. !important여기서는 사용할 필요가 없습니다 .

예를 들면 :

.red { background-color: red; }
.background-none { background: none; }

과

<a class="red background-none" href="#carousel">...</a>

링크에는 빨간색 배경이 없습니다. 이는 덜 또는 동등하게 구체적인 선택기가있는 속성 만 재정의합니다.

LIFO는 브라우저가 CSS 속성을 구문 분석하는 방법입니다. Sass를 사용하는 경우 다음과 같은 변수를 선언합니다.

"$ header-background : 빨간색;"

빨강 또는 파랑과 같은 값을 직접 할당하는 대신 사용하십시오. 재정의하려면 값을 다음에 다시 할당하십시오.

"$ header-background : blue"

그때

background-color : $ header-background;

부드럽게 재정의해야합니다. "! important"를 사용하는 것이 항상 올바른 선택은 아닙니다 .. 그냥 핫픽스 일뿐입니다.