如何在 1 个 div 类中应用 2 个 CSS 样式?
Posted
技术标签:
【中文标题】如何在 1 个 div 类中应用 2 个 CSS 样式?【英文标题】:how to apply 2 css styles in 1 div class? 【发布时间】:2020-11-03 11:02:22 【问题描述】:我正在尝试移动放在 Wordpress 标题中的简码。问题是,从下面的 2 个 css 规则中,只有第一个有效。如果我更改顺序,那么再次只有第一个有效。
@media only screen and (max-width: 1024px)
.right-header-wrap-flags
position: absolute;
top: 25px;
left: 22px;
.navigation-wrap
padding-top: 60px;
@media only screen and (min-width: 1025px)
.right-header-wrap-flags
position: relative;
left: 600px;
top: 50px;
【问题讨论】:
你在末尾少了一个括号 这是一个有点笼统的问题......首先你错过了一个右括号。 顶部的媒体屏幕有效,第二个无效。如果更改顺序只有顶部媒体屏幕有效,则相同 如果您的页面是 900 像素的示例,它适用于第一个条件...我认为您必须了解有关媒体查询的更多信息 我知道,但问题是即使我再次切换顺序,也只有第一个媒体规则适用,顶部的媒体规则仅适用 【参考方案1】:如果您希望“Navigation-wrap”类成为第一个媒体查询的一部分:
@media only screen and (max-width: 1024px)
.right-header-wrap-flags
position: absolute;
top: 25px;
left: 22px;
.navigation-wrap
padding-top: 60px;
<-- this was missing!
@media only screen and (min-width: 1025px)
.right-header-wrap-flags
position: relative;
left: 600px;
top: 50px;
如果“navigation-wrap”应该独立于您的媒体查询:
@media only screen and (max-width: 1024px)
.right-header-wrap-flags
position: absolute;
top: 25px;
left: 22px;
<-- this was missing!
.navigation-wrap
padding-top: 60px;
@media only screen and (min-width: 1025px)
.right-header-wrap-flags
position: relative;
left: 600px;
top: 50px;
原因:您忘记了括号,这基本上意味着第二个媒体查询是您的第一个,所以它永远不会发生!当您的屏幕尺寸达到 1025 像素时,第一个媒体查询不再处于活动状态,而第二个媒体查询在第一个媒体查询内,因此它也不会再发生了。那应该可以解决它
【讨论】:
感谢您的回复。改了还是一样 检查浏览器检查器使用了什么媒体查询 所以如果你把屏幕尺寸改成超过 1025 像素,第一条规则仍然适用吗? 最后还缺少一个括号。仔细检查。 @Pantelis Sarras 你如何改变屏幕尺寸来检查你的代码?我在一个示例中进行了尝试,它对我来说效果很好【参考方案2】:是的,只有第一个 CSS 代码有效,您应该使用 javascript,根据您指定的条件更改样式。
【讨论】:
以上是关于如何在 1 个 div 类中应用 2 个 CSS 样式?的主要内容,如果未能解决你的问题,请参考以下文章
2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。
CSS如何控制 2个div 的 部分 重叠在一起 并将其中一个div的内容固定显示在上层