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

【问题标题】：Why do selectors need to be chained to use flexbox?为什么选择器需要被链接才能使用 flexbox？
【发布时间】：2021-11-25 04:58:18
【问题描述】：

我有这个结构：

.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 会更改框的背景，因此看起来它选择正确。发生这种情况有原因吗？我只是想看看我是否掌握了基础知识。

【问题讨论】：

标签： html css flexbox frontend

【解决方案1】：

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

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

【讨论】：