网站首页 > 知识剖析 正文
(1)权值不同时,权值高的样式优先;
(2)权值相同时,后定义的样式优先;
(3)!important的样式绝对优先;
权值等级划分为4个等级:
一级:内联样式
style="color:red",权值为 1,0,0,0
二级:id选择器
#id="color:green", 权值为 0,1,0,0
三级:class|伪类|属性选择器
.class | :hover,:link,:target | [type], 权值为0,0,1,0
四级:标签|伪元素选择器
div | ::after, ::before, 权值 0,0,0,1
通用选择器(*),子选择器(>),兄弟选择器(+)不在这4个等级之内,它们的权值都为 0,0,0,0。
继承的样式没有优先级。
示例1:
<view class="cs1" style="background-color:red">
区域1
</view>
.cs1{
background-color: goldenrod;//金黄色
}
同时具有class样式和style样式,style样式生效。
实例2:
.cs1{
background-color: goldenrod!important;
}
如果在class样式中加上!important,则该样式生效。
猜你喜欢
- 2025-09-12 在 JAVASCRIPT 中创建 HTML 元素...
- 2025-09-12 不来看看这些 VUE 的生命周期钩子函数?| 原力计划
- 2025-09-12 模仿 youtube 迷你顶部进度条NProgress
- 2025-09-12 国外越来越多的“自拍死”:为一张美照几个赞丢命,值得么?
- 2025-09-12 CSS视觉格式化模型,你真的了解么?
- 2025-09-12 VR×GBA | From Mazu to the World: The Man Who Carved the City
- 2025-09-12 CSS面试题汇总_div css面试题
- 2025-09-12 Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
- 2025-09-12 CSS :has()伪类:2025年最值得掌握的前端黑科技
- 2025-09-12 CSS隐藏空元素的神技::empty伪类让你的代码更优雅!
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)