계속 만들고 성장을 가속화하십시오! 오늘은 "Nuggets Daily New Plan · June 업데이트 챌린지"에 참여하는 첫날입니다. 클릭하면 이벤트 세부 정보를 볼 수 있습니다 .
CSS 스타일을 남용하지 마세요! 중요 규칙
1. !important는 우선순위와 아무 관련이 없음을 이해합니다.
어떤 학생들은 CSS 스타일 우선 순위 계산의 예외 규칙을 -!중요 규칙, CSS의 "가장 높은" 스타일 우선 순위라고 부릅니다. 효과의 관점에서 보면 사실과 일치하는 것처럼 보이기 때문에 실제로 의미가 있습니다. 인라인 스타일 또는 180개의 중첩 수준이 있는 스타일 선택기 조합에 관계없이 !important로 재정의할 수 있습니다.
예를 들어, 우선 순위가 높은 다음 스타일은 !important가 있는 스타일로 쉽게 덮어씁니다.
.text {
color: green !important;
}
body #main .box p span {
color: red;
}
复制代码아래 스타일 우선순위 가중치 부여 규칙에 따르면 "body #main .box p span{}"의 우선순위 가중치는 약 0113이고, ".text{}"의 우선순위 가중치는 약 0010입니다.
- CSS 지연 우선 순위 가중치 규칙 설명: 선택기의 우선 순위는 4개 부분(구성 요소)의 추가라고 할 수 있습니다.
천: 스타일 속성(인라인 스타일)에서 선언된 경우 1포인트. 이러한 선언에는 선택자가 없으므로 항상 1000점을 얻습니다. 수백: ID 선택기를 포함하는 선택기의 경우 1점입니다. Tens: 클래스 선택기, 속성 선택기 또는 의사 클래스를 포함하는 선택기의 경우 1포인트입니다. Ones bit: 선택자는 요소를 포함하고 의사 요소 선택자는 1점을 받습니다.
| 선택자 | 수천 | 수백 | 십 | 한자리수 | 우선 순위 |
|---|---|---|---|---|---|
| 바디 P 스팬 | 0 | 0 | 0 | 삼 | 0003 |
| .상자 | 0 | 0 | 1 | 0 | 0010 |
| #기본 | 0 | 1 | 0 | 0 | 0100 |
| 총 | 0 | 1 | 1 | 삼 | 0113 |
| 선택자 | 수천 | 수백 | 십 | 한자리수 | 우선 순위 |
|---|---|---|---|---|---|
| .상자 | 0 | 0 | 1 | 0 | 0010 |
| 총 | 0 | 0 | 1 | 0 | 0010 |
正如上图所示，结果很显然，应用了 ".text{}" 的样式，文本颜色为 green。 我们要注意，“body #main .box p span{}” 的优先级权重大约是 0113， 而 ".text{}" 的优先级权重大约是 0010，前者的优先级更高，却应用了后者的样式， 这是因为 !important 这个例外规则。注意，从技术上讲，!important 与优先级无关， 所以你要算 !important 的优先级权重是多算？一万？八千？这没法算，它是例外规则，与最终的结果直接相关，但是与优先级无关。
当然，你如果从样式作用结果的角度理解，认为 !important 具有一个很高的样式优先级权重，尽管这个权重值不存在， 但这样理解问题也不大。但说它是样式优先级的例外规则更合适，因为它就是如此设计的。
关于例外规则，这在不合适量化，在某一套计算规则难以算清（难以解释）的场景下，使用例外规则很有好处。
二、什么时候可以使用 !important 规则
tips：css 中使用 !important 的合理场景，是去覆盖糟糕的难以更改的样式。 注意是覆盖，而不是一开始写样式就使用 !important。覆盖+难以更改就是我认为的 !important 的合理适用场景。
例如下面的场景：
1.覆盖内联样式
内联样式的优先级权重很高，如果不便于改动源码中的样式，那么选用 !important 去覆盖掉原来的内联样式是合适的。因为此时，除了改动源码，还有什么合适的办法可以改动内联样式？似乎没有了吧。然后就是关于“不便改动源码”的理解，例如第三方插件的内联样式，这确实不便于改动。如果是自己开发中的项目，那么改动源码可能比起用 !important 去覆盖更合适。对于一些老旧项目里面的内联样式，这种源码是可以动的，但如果你认为“改动源码”非常费劲，你也有一点理由去使用 !important，但不太建议。
2.覆盖优先级很高的选择器
除了内联样式，还有一种需要使用 !important 的场景，那就是样式优先级很高，权重很大的样式。优先级很高，权重很大，是啥概念呢？就是除了改源码（代码），几乎没有办法能改动了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-important Demo</title>
<style>
#main {
color: red;
}
body #main {
color: #002afd;
}
html #main {
color: #5dfd00;
}
/* 假设这份样式在第三方插件中，除了改动源码，
还有什么办法可以覆盖 html body #main{} 的样式，样式穿透已经改不动了吧 */
html body #main {
color: #2c3e50;
}
</style>
</head>
<body>
<div id="main">
这一段普通的文字
</div>
</body>
</html>
复制代码例如上面的例子，html body #main{} 的优先级很高，如果的代码是在第三方插件中，我们不便于改动源码，也就是也无法使用内联样式这个秘密武器，而样式穿透的优先级又不够，没啥好办法了，此时就是 !important 的适用场景了。
还是这个样式 html body #main{} ，如果它在自己的项目中，但是不便于改动 html body #main{} 本身，因为那可能带来一些副作用，写内联样式又不好，那么也可以考虑 !important。请特别注意，使用 !important，是因为 html body #main{} 实在太高了，高到别的级联样式规则没办法覆盖，才使用 !important。如果是 html #main{} 或 body #main，这样优先级还不是很高的样式，那么不应该使用 !important 规则，因为我们还有合适的选择，例如 html body #main{} 的优先级就比它们都高。
还有一种情况，就是旧的样式已经使用了 !important 规则，而我们不便于改动源码（代码），那么只能使用 !important 去覆盖 !important 的样式。例如下面这样：
div p { height: 30px !important; }
#my-container div p { height: 50px !important; }
复制代码有时可能还要结合样式穿透符，例如下面这样：
::v-deep #my-container div p { height: 50px !important; }
复制代码三、禁用 !important 的经验法则
为啥要特别强调谨慎使用 !important，因为正如前文说到的 !important 是例外规则，没法算清优先级权重，就是说使用 !important 会破坏固有的级联规则，让调试找bug，以及覆盖样式都变得更加困难。所以，才要特别强调谨慎使用 !important。
所以：
①样式级联规则还管用，就别用 !important。
②还有办法覆盖样式就别用 !important。
다음은 Mozilla의 경험 법칙입니다.
- 문제를 해결하기 위해 스타일 규칙을 사용 하는 대신
!important - 사이트 전체 또는 외부 CSS를 재정의해야 하는 특정 페이지 에서만 사용
!important - 플러그인에서 절대 사용하지 마세요
!important - 사이트 전체 CSS 코드에서 사용 하지 마십시오 .
!important