html - CSS覆盖问题

Question

我有一个 CSS 覆盖问题。整个 div 都有一个父选择器，它为其中的所有输入设置样式。我有一些输入，我确实想要另一种样式。即使我将这些样式放在 CSS 文件中父项的下方，它们仍然无法覆盖父项的 css。请参阅嵌入式 CSS 以获取更多说明。 (我不想使用 !important)。

应用的 CSS(在 CSS 文件的顶部定义)

#content #newPost .inner .inputs button {
    width: 70%;
    height: 50px;
    background-color: #F7F9FA;
    text-align: center;
    margin: 15px 0 0 15%;
    cursor: pointer;
    border: 1px solid #A0A0A0;
    transition: 0.2s;
}

应该应用的 CSS(在底部定义)

#resultArray .team button {
    width: 40px;
    height: 100%;
    border: none;
    background-color: #E3E8E8;
    color: #000;
    padding: 0;
    text-align: center;
    margin: 0;
    cursor: default;
}

HTML

 <div id='newPost'>
    <div class='inner'> 
        <div class='inputs'>
            <div id='resultArray'>
                <div class='current'><button disabled>1</button><input>
                </div>
            </div>
        <input placeholder='Title'>
        <textarea placeholder='Content'></textarea>
        <button id='publishPost'>Publish</button>
</div>

Answer 1

到目前为止，我从您的 CSS 和标记代码中得到的问题是 CSS 选择中的链接。您可以尝试应用以下选择器:

#content #newPost .inner .inputs #resultArray button {
    width: 40px;
    height: 100%;
    border: none;
    background-color: #E3E8E8;
    color: #000;
    padding: 0;
    text-align: center;
    margin: 0;
    cursor: default;
}

此外，当您尝试覆盖长链 CSS 选择器时，您应该正确理解 CSS 选择优先级规则。

CSS 选择链有多长并不重要，如果您了解以下优先级:

在 CSS 选择器中，每个选择器都有一个数学值:每个标签 = 1，每个 .class = 10 或伪类，例如 :hover、:active = 10、#id = 100、内联样式 = 1000 和 for !important =无穷。您永远不能在没有另一个 !important 的情况下覆盖一个 !important。

因此，您的第一个选择是“#content #newPost .inner .inputs button”= 100 + 100 + 10 + 10 + 1 = 221但是对于“#resultArray .team button”= 100 + 10 + 1 = 111

所以第二次选择永远不会优先于第一次选择。

另外，为了更好地理解，请参阅 here .