CSS内部样式和外部样式哪个优先级高?

如题所述

很多地方都会讲成内部样式优先级比外部样式高,其实是不对的,内部样式和外部样式是具有相同的优先级的,就看谁出现的位置靠后,谁优先。如下面的代码,文字肯定要显示成黄色,而不是绿色。因为1.css文件在style样式定义后面引入的。如果放到前边,则会显示成内部样式定义的绿色。

--- 1.css

p{

font-size: 20px;

color:yellow;

background: black;

}


--- 1.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

   <style>

p{

color:green;

background:black;

}

</style>

<link rel="stylesheet" href="1.css">

</head>

<body>

<p>test text!</p>

</body>

</html>

温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-07-18
id优先级高于class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
内部样式高于外部样式

总结:单一的(id)高于共用的(class),有指定的用指定的,无指定则继承离它最近的
第2个回答  2011-07-11
内部的高

内联样式 > 内部样式 > 外部样式 (内联就是写在标签的style属性里的样式)

ID选择器 > class选择器本回答被提问者和网友采纳
第3个回答  2011-07-11
内部
第4个回答  2020-12-22

Vue实践-CSS样式position/display/float属性对比使用