Question

我有一个CSS覆盖问题。整个div有一个父选择器，用于设置所有输入的样式。我有一些输入，我想要有另一种造型。即使我把这些样式放在CSS文件中的父母下面，它们仍然无法覆盖父css。请参阅嵌入式CSS以获得进一步说明。（我更喜欢不使用！重要）。

应用的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选择中，每个选择器都有一个mathamatical值：每个tag = 1，每个.class = 10或伪类，例如：hover，：active = 10，＃id = 100，inline styling = 1000和for！important =无穷。你永远不能覆盖一个！重要而没有另一个！重要。

所以形成你的第一个选择是＆＃34; #content #newPost .inner .inputs button＆＃34; = 100 + 100 + 10 + 10 + 1 = 221 但对于＆＃34; #resultArray .team按钮＆＃34; = 100 + 10 + 1 = 111

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

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

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特异性的一个很好的资源：

CSS覆盖问题

3 个答案:

编辑：等等...你的html中也没有.team类，所以选择器点无处

-