Css 需要覆盖级联样式吗

我有一种风格：

.window .div {
    border:medium solid #000000;
    height:150px;
    background-color: #0099FF;
    }

然后我有另一种风格：

 #NewDiv {
    font:Arial, Helvetica, sans-serif;
    font-size: 24px;
    height: 20px;
    border-bottom-width: medium;
    border-bottom-style: solid;
    border-bottom-color: #000000;
        }

我需要在窗户里面放一个#NewDiv div标签。div，但是#坐在window.div标签内时，NewDiv必须保留自己的样式。我该怎么做

目前，当我尝试时，#NewDiv采用与window.div相同的样式，当我把它放在里面时，我根本不想要它。有什么建议吗

HTML:

这里怎么了？

您可以使用

！重要信息

覆盖样式的后缀。或者更好的是，让

#NewDiv

的规则更加明确，比如：

window .div #NewDiv

---

由于

.div

中的输入错误，您的第一个选择器错误。HTML中没有

s。因此，没有给出高度为

150px

。由于没有设置高度，它看起来像是

.window

，它的内容都是相同高度的

20px

编辑：您当前的边框样式没有为顶部、左侧和右侧指定任何内容。这意味着它们继承自

.window div

，并且未设置为零

尝试用以下内容替换您的样式：

.window div {
    border: medium solid #000000;
    height: 150px;
    background-color: #0099FF;
}

#NewDiv {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    height: 20px;
    /* Set the border width here. Style and color will be inherited from above */
    border-width: 0 0 medium 0;
}

正如BoltClock所说，“.div”在CSS中应该是“div”，因为您还没有将其作为类应用于html中

此外，要覆盖父容器的样式，您需要重新指定其中的每个样式。下面，我将#NewDiv的border属性重新定义为none（删除.window的边框），然后指定border bottom（添加下划线效果）

---

没有

window

HTML元素，

.div

类实际上没有意义。你的HTML是什么样子的？另外，

font

是一种简写，或者将字体声明为

font:24px Arial，Helvetica，sans serif

或

字体系列：Arial、Helvetica、sans serif

。在中添加

#NewDiv

时，HTML是什么样子？这里怎么了？那么问题是由现有CSS中的输入错误引起的。请看我的答案。是的，这就是我建议更新选择器的原因。这些建议都不起作用。。。。它的.window.div是否重要？我意识到我以前漏掉了点。@WillingLearner:我不这么认为，

#id

总是比

.class.class

更具体。我需要边框底部，以便#NewDiv充当下划线。这里并没有看到与我最初的示例有太大的不同。我试过了，运气不好。我想知道如何覆盖嵌套div的所有内容一般来说，以防我以后要进行设计更改。@WillingLearner:这意味着您希望

#NewDiv

仅具有底部边框，而不具有其他边框？@BlotClock:是的，目前这种样式没有其他边框，只在底部加上边框。@WillingLearner:好的，我知道了，看看我的编辑是否解决了您的问题。@WillingLearner:这是JSFIDE上的外观：

.window div {
    border: medium solid #000000;
    height: 150px;
    background-color: #0099FF;
}

#NewDiv {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    height: 20px;
    /* Set the border width here. Style and color will be inherited from above */
    border-width: 0 0 medium 0;
}

.window div {
    border:medium solid #000000;
    height:150px;
    background-color: #0099FF;
}

#NewDiv {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    height: 20px;
    border:none;
    border-bottom:medium solid #000000;
}