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以及！important = infinity。 如果没有另一个！important，就永远不能覆盖一个！important。

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

因此，第二选择永远不会优先于第一选择。

另外为了更好的理解请看这里 。

Answer 2

你这个div格格外近

<div id='resultArray'>
            <div class='current'><button disabled>1</button><input>
            </div>
        </div>

删除此一个并

验证您的代码，例如：

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

比开始工作： https : //jsfiddle.net/yhsLvc7g/1/

Answer 3

编辑：等等...您的html中也没有.team类，因此选择器指向无处

-

您的第一个选择器比底部的选择器更具体，因此尽管在层叠流中位于上方，但仍将应用它。

您需要击败顶部选择器的2个ID，2个类和1个标记的特异性。 那是很多特异性，这意味着您需要使用至少2个ID +至少2个类+至少1个标签来击败它，然后级联将接管。 设置一个额外的类（所以2 + 3 +1）或一个额外的ID（所以3 + 2 +1）也会击败它。 所以你需要做一些荒谬的事情

#content #newPost .inner .inputs #resultArray .team button

就是说，您的CSS格格不入，这意味着您将遇到成千上万的此类问题。

您实际上应该做的是更改第一个选择器（以及您以这种方式拥有的所有选择器），以减少特异性，例如

.inner .inputs button

可能会成功

这是了解CSS特异性的好资源：