How do I give a CSS class priority over an id?(如何让 CSS 类优先于 id?)
问题描述
我有一个这样的元素:
#idname{边框:2px纯黑色;}.班级名称{边框:2px 纯灰色;}
<div id = "idname" class="classname">这是一个测试</div>
上一页>
我想优先考虑它的 CSS 类而不是它的 CSS id.是否可以?(换句话说,我想将 gray
-color 设置为它的 border
)
不要使用 !important
因为它是最糟糕的解决方案,如果你想切换样式就那样做.
#idname{边框:2px纯黑色;}#idname.classname {边框:2px 纯灰色;}
<div id = "idname" class="classname">这是一个测试</div>
上一页>
如果您还想使用类 classname
而不仅仅是 #idname
来定位其他元素,请使用:
#idname.classname, .classname {边框:2px 纯灰色;}
I have a element like this:
#idname{
border: 2px solid black;
}
.classname{
border: 2px solid gray;
}
<div id = "idname" class="classname">it is a test</div>
I want to give a bigger priority to its CSS class instead of its CSS id. Is it possible? (In other word I want to set gray
-color as its border
)
Do not use !important
because it is the worst solution, if you want to switch the styling then do it that way.
#idname{
border: 2px solid black;
}
#idname.classname {
border: 2px solid gray;
}
<div id = "idname" class="classname">it is a test</div>
If you want to target also other elements with the class classname
and not only the #idname
then use:
#idname.classname, .classname {
border: 2px solid gray;
}
这篇关于如何让 CSS 类优先于 id?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何让 CSS 类优先于 id?
基础教程推荐
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 直接将值设置为滑块 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01