首页 > 其他分享 >关于内部样式和外部样式的优先级问题

关于内部样式和外部样式的优先级问题

时间:2023-01-26 20:05:46浏览次数:39  
标签:style 优先级 样式 --- 外部 black color


很多人都会认为内部样式优先级比外部样式高,其实是不对的,内部样式和外部样式是具有相同的优先级的,就看谁出现的位置靠后,谁优先,即最后渲染有效。

如下面的代码,文字肯定要显示成黄色,而不是绿色。因为1.css文件在style样式定义后面引入的。

如果将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>

 

标签:style,优先级,样式,---,外部,black,color
From: https://blog.51cto.com/u_14365218/6023666

相关文章

  • JQuery样式操作
    获取样式:attr("class")设置样式:attr("class","myclass")追加样式:addClass("myclass")移除样式:removeClass("myclass")切换样式:toggleClass("myclass"),如果样式存在则去......
  • Delphi启动外部程序
    无论是用VC还是用Delphi,启动外部程序,调用的都是相同的系统中的API函数,如下Delphi代码所示://登录按钮procedureTForm1.Label_LoginClick(Sender:TObject);beginRunOther......
  • 【UE4 C++】调用外部链接库:lib静态库
    本例以插件形式测试使用Lib引用,打包程序运行不用再拷贝lib文件需要lib文件和.h头文件lib部分的代码.h头文件 #pragmaonce #ifndef__MYT......
  • P27_wxss - 全局样式和局部样式
    全局样式定义在app.wxss中的样式为全局样式,作用于每一个页面。局部样式在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面。注意:当局部样式和全局样......
  • VUE3,如何在外部修改data里面的对象?
    提问: VUE3,如何在外部修改data里面的对象?varmyvue={   data(){       return{           test:{}       }   },   creat......
  • vue3+vite+tailwind+element配置,el-button被覆盖样式
    生产环境下1、vite.config.ts生产环境代码分文件夹存放element自动导入下,解决el-button开发环境下被tailwind覆盖样式base:process.env.NODE_ENV==='production'?......
  • P26_wxss - 样式导入
    样式导入什么是样式导入使用WXSS提供的@import语法,可以导入外联的样式表。@import的语法格式@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。示......
  • 样式穿透
    应用场景Vue组件中写样式,通常如下方代码:<stylescoped>.comA.data{background:red;}</style>因为关键字scoped的原因,style标签内的样式只会对当前......
  • C语言运算符&优先级
    运算符优先级这一块即使你用了很久C语言,如果不刻意记忆,也是容易搞混的.C语言的运算符非常多,一共有50多种,可以分成若干类。算术运算符算术运算符专门用于算术......
  • STM32F103和AIR32F103的FreeRTOS中断优先级
    关于ArmCortexM系列内核的中断优先级https://community.arm.com/arm-community-blogs/b/embedded-blog/posts/cutting-through-the-confusion-with-arm-cortex-m-int......