时间戳

首页 > 解决方案 > 为什么选择器需要被链接才能使用 flexbox？

html - 为什么选择器需要被链接才能使用 flexbox？

问题描述

我有这个结构：

.flex-container {
    border: solid 1px purple;
    display: flex;
}
.flex-container div {
    border: solid 1px red;
    padding: 20px;
    margin: 20px;

    height: 100px;
    
    
    flex: 1 1 0%;
}

.flex-container .first {
    
    border: solid 1px blue;
    flex: 3 1 0%;
    
}

.first {
    border: solid 1px orange;
    background-color: brown;
}

.second, .third {
    border: solid 1px green;
    flex: 1 1 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="flex-container">
        <div class="first">
            First
        </div>
        <div class="second">
            Second
        </div>
        <div class="third">
            Third
        </div>
    </div>
    <div class="first">Last</div>
    
</body>
</html>

在我将 .flexcontainer 添加到 .flex-container .first {} 选择器之前，flex 没有应用 flex: 3 1 0%。但是使用选择器 .first 会更改框的背景，因此看起来它选择正确。发生这种情况是否有原因？我只是想看看我是否掌握了基础知识。

标签： htmlcssflexboxfrontend

解决方案

这与 flexbox 无关，它只是 CSS 的工作原理。因为您已经有了一个.flex-container div带有flex属性的规则，所以它会覆盖该.flex-container规则，因为它更具体。您可以在此处阅读有关 CSS 特异性的更多信息：CSS 特异性

就个人而言，我建议不要在 CSS 选择器中使用标签名称，除非绝对必要。我更喜欢为每个具有独特样式的元素提供自己的类，这样我就可以在一个短选择器中定位该类，而不必担心周围有更多特定的选择器可能会与它发生冲突。BEM（锁元素修饰符） CSS命名约定对于这种方法很有用。

推荐阅读