CSS的优先级别_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-21 09:17:581121검색
1、样式的优先级
内联样式 > 内部样式 > 外部样式
以下的特例：外部样式会覆盖内部样式（不推荐内联样式）
<html><head> <style type="text/css"> div { background:red; } </style> <link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div>Hello World!</div></body></html> 2、选择器的优先权
内联样式（1000）> id（100）> class（10）> tag（10）
以下例子div将显示的背景色是黑色。
<html><head> <style type="text/css"> #divId { height:100px; background:black; } .divClass { height:100px; background:green; } </style></head><body> <div id="divId" class="divClass">Hello World!</div></body></html>
同理，之前遇到过一个问题：
<html><head> <style type="text/css"> #divId { height:100px; background:black; } .divClass { height:100px; background:red; } </style></head><body> <div id="divId"></div></body><script type="text/javascript"> window.onload = function() { var divId = document.getElementById("divId"); divId.className = "divClass"; };</script></html>
这时你会发现js的代码不起作用，相信你应该知道原因了吧。
解决的方法有很多，以下说说两种：
（1）如果需要修改的属性少，可以直接用js修改属性
window.onload = function() { var divId = document.getElementById("divId"); divId.style.background = "red";}; (2)当要修改的属性多，可以在外出加多一个有id的标签，让class的优先级高于当前div的id
<html><head> <style type="text/css"> #divId { height:100px; background:black; } #boss .divClass { height:100px; background:red; } </style></head><body> <div id="boss"> <div id="divId"></div> </div></body><script type="text/javascript"> window.onload = function() { var divId = document.getElementById("divId"); divId.className = "divClass"; };</script></html>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.