CSS的优先级_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:31:501159검색
样式的优先级：
（内联样式表[嵌入式样式]）>（内部样式表）>（外部样式表）
经过测试动手测试发现有个（唯一的）例外 情况：当引用外部样式在内部样式表（非嵌入式样式）的后面时，外部样式会覆盖内部样式 。
测试1（插入顺序：内部样式；外部样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>case</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; background-color: black;/*黑色*/ } </style> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></head><body> <div id="container"></div><!-- 结果：蓝色，覆盖--></body></html>
测试2（插入顺序：嵌入样式；外部样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>case</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; } </style> </head><body> <div id="container" style="background-color: red"</div><!-- 结果：红色，没有覆盖--></body><link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></html>
测试3（外部样式；外部样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>test</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 50px; height: 50px; } </style> <link rel="stylesheet" type="text/css" href="CaseTest.css"><!-- background-color: red;--> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- background-color: blue; --></head><body> <div id="container"></div><!-- 结果：blue--></body></html>
测试4（外部样式；嵌入样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>（内联样式表[嵌入式样式]）>（外部样式表）</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; } </style> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></head><body> <div id="container" style="background-color: red"></div><!-- 结果：红色--></body></html>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.