檬味博客 » 问答 » CSS内部样式和外部样式哪个优先级高？

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

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

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

ID选择器 > class选择器2011-07-11
很多地方都会讲成内部样式优先级比外部样式高，其实是不对的，内部样式和外部样式是具有相同的优先级的，就看谁出现的位置靠后，谁优先。如下面的代码，文字肯定要显示成黄色，而不是绿色。因为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>
2020-03-13
id优先级高于class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
内部样式高于外部样式

总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的2011-07-18
内部2011-07-11
Vue实践-CSS样式position/display/float属性对比使用

2020-12-22
内部！2011-07-11
mengvlog 阅读 32 次 更新于 2025-09-09 17:00:06 我来答关注问题0
6 个回答檬味博客专题活动
  • 书香学编程 CSS内部样式和外部样式哪个优先级高?

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

  • 信必鑫服务平台 css行间样式,内部样式,外部样式的区别和优势各是什么?

    内部样式表: 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样: hr {color: sienna;} p {margin-left: 20px;} 内联样式: 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上...

  • jasonshaw 谁给我讲讲css行间样式,内部样式,外部样式的区别和优势各式什么啊?

    外部样式就是在顶部从外部引入的样式，该样式的定义与内部样式一样，只是由外部的css文件定义而已，优点在于同样的样式不需要重写每一页的代码，只要有使用需求，只需要都引入该相同的外部样式文件即可，这样避免了每个网页重写一遍的麻烦。缺点在于：修改的时候要修改单独的文件，如果外部样式css文件管理不好...

  • 文暄生活科普 HTML引入CSS样式三种方法及优先级

    总结，内联定义的样式优先级最高，内部CSS次之，外部CSS的优先级最低。我是胖虎，一个正在创业的前端工程师，如果你同样迷茫不知道前端该如何学习，可以加入我的自学团，会有知识分享，匹配学习伙伴，还可以参加我组织的上线项目及活动。

  • 963250 css 三种样式,哪一种使用度高

    外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表 内联样式 由于要...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部