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; }
!important
는 IE6에서 인식되지 않습니다. 예: 🎜.testClass{ color:blue !important; } .testClass{ color:red; }
위 내용은 CSS에서 우선순위를 강제로 높이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!