CSS에서 우선순위를 강제로 높이는 방법
- 青灯夜游원래의
- 2022-09-06 17:49:504540검색
CSS에서는 "!important" 문을 설정하여 우선순위를 강제로 높일 수 있습니다. 이 문은 지정된 CSS 스타일 규칙의 적용 우선순위를 높이는 데 사용되며 CSS 스타일 값 끝에 추가되어 제공됩니다. 스타일이 더 중요합니다. 구문은 "selector{property:value!important;}"입니다. "!important" 규칙을 사용하면 스타일 시트의 자연스러운 계단식 효과가 손상되어 코드 유지 관리가 어려워집니다. 따라서 꼭 필요한 경우가 아니면 !important 규칙의 사용은 최대한 피해야 하며 특별한 상황에서만 사용해야 합니다. .
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서는 "!important" 선언을 설정하여 우선순위를 강제로 높일 수 있습니다.
!important 선언
!important는 지정된 CSS 스타일 규칙의 적용 우선순위를 높이는 데 사용되며 더 많은 가중치를 부여하기 위해 CSS 값 끝에 추가됩니다.
选择器{属性:值 !important;}참고: 속성: value !important 속성 값은 공백으로 구분할 수 있습니다. 属性：值 !important 属性值用空格隔开即可。
在CSS中，样式规则以级联方式应用于元素。下面这个列表中越靠前的权重越小：
● 浏览器样式：是Web浏览器声明的默认样式。
● 用户声明的样式：是用户使用浏览器选项设置或通过开发人员调试工具修改的自定义样式。
● 开发中声明的样式：是网站开发人员在CSS样式表中声明的样式。
● 具有!important规则的开发者声明样式。
● 具有!important规则的用户样式。
!important为开发者提供了一个增加样式权重的方法，比直接在元素的 style 属性中设置 CSS 声明还要高， 一般用在 CSS 覆盖 JavaScript设置上。
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试!Important</title>
</head>
<style type="text/css">
#Box div
{
color: red;
}
.important_false
{
color: blue;
}
.important_true
{
color: blue !important;
}
</style>
<body>
<div id="Box">
<div class="important_false">
这一行末使用important</div>
<div class="important_true">
这一行使用了important</div>
</div>
</body>
</html>效果图：
CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，
不同的是，第二行未使用!important，而第三行使用了!
总结：
第一行字体颜色是红色，可以证明，css样式设置中，id的优先级大于class，这行字还是红色。
第二行字体颜色是蓝色，可以证明，!important的优先级最高，important_true的css样式生效，这行字变为了蓝色！
什么时候用!important规则？
除非绝对必要，否则不应使用!important规则；使用!important规则会打破了样式表的自然级联效果，使得代码难以维护。但是，在某些情况下你必须使用！important：
1、在测试和调试网站时，!important规则是非常有用的。
如果我们的代码中存在一些CSS问题，并且希望确保应用特定的样式，则可以使用!important规则在网站上临时修复问题，直到找到更好的方法（可能需要一些时间） 。
2、输出样式表
!important规则也可用于输出样式表，以确保应用样式而不被其他任何内容覆盖。
结论
使用!important对于性能并没有什么负面影响；但是从可维护性角度考虑，除非绝对必要，应尽可能的避免使用!important规则，它应该只在特殊情况下使用。
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！
特别说明：
!important
● 사용자 선언 스타일: 사용자가 브라우저 옵션을 사용하여 설정하거나 개발자 디버깅 도구를 통해 수정한 사용자 정의 스타일입니다.
● 개발 시 선언한 스타일: 웹사이트 개발자가 CSS 스타일 시트에 선언한 스타일입니다. 🎜🎜● 개발자가 !중요 규칙을 사용하여 선언한 스타일. 🎜🎜● 중요한 규칙이 있는 사용자 스타일. 🎜🎜!important는 개발자에게 요소의 스타일 속성에 CSS 선언을 직접 설정하는 것보다 스타일의 가중치를 높이는 방법을 제공합니다. 이는 일반적으로 CSS가 JavaScript 설정을 재정의할 때 사용됩니다. 🎜🎜예: 🎜.testClass{
color:blue !important;
color:red;
}🎜렌더링: 🎜🎜🎜🎜CSS 코드의 첫 번째 줄은 상자에 있는 모든 div의 글꼴 색상을 빨간색으로 설정하고, 두 번째와 세 번째 줄은 클래스를 사용하여 자체 div의 글꼴 색상을 파란색으로 재정의합니다. 🎜 🎜The 차이점은 두 번째 줄에는 !important가 사용되지 않고 세 번째 줄에는 !important가 사용된다는 점입니다. 🎜🎜요약: 🎜🎜첫 번째 줄의 글꼴 색상은 CSS 스타일 설정에서 확인할 수 있습니다. ID의 우선순위가 클래스보다 높습니다. 텍스트는 여전히 빨간색입니다. 🎜🎜두 번째 줄의 글꼴 색상은 파란색입니다. !important가 가장 높은 우선순위를 갖는다는 것을 증명할 수 있으며, important_true의 CSS 스타일이 적용되며 이 텍스트 줄은 파란색으로 변합니다! 🎜🎜🎜🎜중요한 규칙은 언제 사용해야 하나요? 🎜🎜🎜🎜꼭 필요한 경우가 아니면 !important 규칙을 사용하면 안 됩니다. !important 규칙을 사용하면 스타일 시트의 자연스러운 계단식 효과가 손상되어 코드를 유지 관리하기 어려워집니다. 하지만 사용해야 하는 상황도 있습니다! 중요: 🎜🎜🎜1. 웹사이트🎜를 테스트하고 디버깅할 때 !important 규칙이 매우 유용합니다. 🎜🎜코드에 CSS 문제가 있고 특정 스타일이 적용되었는지 확인하려는 경우 더 나은 방법을 찾을 때까지 !important 규칙을 사용하여 사이트의 문제를 일시적으로 해결할 수 있습니다(시간이 걸릴 수 있음). . 🎜🎜🎜2. 스타일 시트 출력🎜🎜🎜!중요한 규칙을 사용하여 스타일 시트를 출력하여 다른 항목을 덮어쓰지 않고 스타일을 적용할 수도 있습니다. 🎜🎜🎜결론🎜🎜🎜 !important를 사용하는 것은 성능에 부정적인 영향을 미치지 않지만 유지 관리 관점에서 꼭 필요한 경우가 아니면 !important 규칙의 사용은 최대한 피해야 하며 특별한 경우에만 사용해야 합니다. . 🎜🎜위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! ! 🎜🎜🎜🎜특별 참고 사항: 🎜🎜🎜🎜!important는 IE6에서 인식되지 않습니다. 예: 🎜.testClass{
color:blue !important;
}
.testClass{
color:red;
}🎜이 쓰기 방법은 IE6에서 인식되지 않습니다. .testCalss는 마지막에 빨간색으로 표시되지만 작성 방법을 변경하여 IE6에서 인식하도록 할 수도 있습니다! important🎜rrreee🎜 (동영상 공유 학습: 🎜웹 프론트엔드 개발🎜)🎜위 내용은 CSS에서 우선순위를 강제로 높이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!