gpt4 book ai didi

html - 为什么媒体查询仅在我的 CSS 中放在最后时才有效?

转载 作者:行者123 更新时间:2023-11-28 10:36:35 27 4
gpt4 key购买 nike

我正在学习 css,我遇到了一个包含以下代码的示例:

<body>
<a href="#" class="CardLink CardLink_Hearts">Hearts</a>
<a href="#" class="CardLink CardLink_Clubs">Clubs</a>
<a href="#" class="CardLink CardLink_Spades">Spades</a>
<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>
</body>

和CSS:

.CardLink {
display: block;
color: #666;
text-shadow: 0 2px 0 #efefef;
text-decoration: none;
height: 2.75rem;
line-height: 2.75rem;
border-bottom: 1px solid #bbb;
position: relative;
}

@media (min-width: 300px) {
.CardLink {
padding-left: 1.8rem;
font-size: 1.6rem;
}

.CardLink:before {
display: block;
}
}

.CardLink:before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}

.CardLink_Hearts:before {
content: "❤";
}

.CardLink_Clubs:before {
content: "♣";
}

.CardLink_Spades:before {
content: "♠";
}

.CardLink_Diamonds:before {
content: "♦";
}

/*@media (min-width: 300px) {
.CardLink:before {
display: block;
}
}*/

想法是当视口(viewport)尺寸低于 300px 时卡片图标不显示,否则显示它们。

我正在研究代码,但我不明白为什么我们必须定义两次 @media (min-width: 300px) 才能使代码按预期工作。

为什么我们不能将 css 最后一段中的代码放到媒体屏幕尺寸所属的部分(良好的代码重用而不是再次声明它)?

如果我这样做,则不会显示任何图标(这是下面的代码)。

谁能解释一下?检查 plunker,这按预期工作:https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview

最佳答案

因为您正在使用层叠 样式表。

级联就像瀑布:渲染引擎​​从源文档的顶部开始并向下运行。

在这种情况下,它会看到您的媒体查询。然后它会看到您的其余代码,这些代码优先,因为它会在后面出现。

例如,假设您的样式表是这样的:

div { color: red; }

div { color: blue; }

div { color: red; }

您的文本颜色将为红色。

在这种情况下:

div { color: red; }

div { color: blue; }

您的文本颜色将为蓝色。

在这两种情况下,CSS 都会选择样式表中的最后一个声明。

如果您希望媒体查询优先,请将其放在代码的末尾。

(这看起来很简单,而且通常很简单。只要确保了解 CSS specificity 即可。)

关于html - 为什么媒体查询仅在我的 CSS 中放在最后时才有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37189795/

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