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

다른 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키워드 대신 선택기를 더 구체적으로 만들 수 있습니다. 예를 들면 다음과 같습니다.

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

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

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

---

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

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

Checkout sample calculations here on css-tricks.com. This will help you understand the concept very well and it will only take 2 minutes.

If you then like to produce and/or compare different specificities by yourself, try this Specificity Calculator: https://specificity.keegan.st/ or you can just use traditional paper/pencil.

For further reading try MDN Web Docs.

All the best for not using !important.

---

If you list the bakground-none class after the other classes, its properties will override those already set. There is no need to use !important here.

For example:

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

and

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

The link will not have a red background. Please note that this only overrides properties that have a selector that is less or equally specific.

---

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

"$ header-background : 빨간색;"

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

"$ header-background : blue"

그때

background-color : $ header-background;

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

참고 URL : https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class