css样式的优先级

来源：互联网发布：小说改编网络剧编辑：程序博客网时间：2024/06/09 19:07

1.内联样式 > 内部样式表 > 外部样式表（写在head标签中）

外部样式表使用link引入只能写在head标签中。故内部样式表相当于在外部样式表的后面。所以内部样式表离元素近优先级高，如果将外部样式表的link标签写在style标签后面，。外部样式表会优先生效（不过这样不怎么符合规则）。

w3c中：

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

2.选择器相同的时候看先后顺序，后定义的优先级高。
<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>样式表</title>    <link rel="stylesheet" href="newe.css"> </head><style>.la{color:red;}.main{color:blue;}</style><body><div class="main la" id="con" >   CSS样式表的优先级问题</div></body></html>字体颜色为蓝色。
3.定义多个class或ID
<div class="main" class="la" ></div>
这样定义是错误的。浏览器只会识别第一个class，忽略第二个，浏览器显示的源码：<div class="main"></div>正确定义为<div class="main la"></div>。
<div id="main" id=“la”></div>或者<div id="main la”></div>均是错误的因为语法规定一个控件只能有一个ID。

0 0