gpt4 book ai didi

css - 不同选择器上的媒体查询有什么问题?

转载 作者:行者123 更新时间:2023-12-05 01:53:08 26 4
gpt4 key购买 nike

<分区>

当使用不同的选择器列表定义元素样式时,为什么媒体查询不起作用?

例如,我有一个 HTML 页面:

<div class="wrapper">
<div class="inner">
<div class="left">
<div class="text">
<span class="sample-text">test</span>
</div>
</div>
</div>
</div>

我有 span 元素的样式:

.wrapper .inner .left .text .sample-text {
color: red;
}

@media screen and (max-width: 800px) {
.sample-text {
color: green;
}
}

因此,当最大宽度小于 800px 时,.sample-text 不是绿色,直到我使用 !important 或相同的选择器:

@media screen and (max-width: 800px) {
.wrapper .inner .left .text .sample-text {
color: green;
}
}

这个问题在使用 CSS 预处理器时尤为明显,因为它会生成类链,就像我的示例中那样。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com