Question

我有一种风格：

.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;
        }

我需要在窗口.div中放置一个#NewDiv div标签，但是...... #NewDiv必须保持自己的样式，同时坐在窗口.div div标签内。我该怎么做？

目前，当我尝试时，＃NewDiv采用与窗口.div相同的样式，当我将其置于其中时，我根本不需要它。有什么建议吗？

HTML：

<div class="window">
    <div>
        <div id="NewDiv">Whats Wrong Here?</div>
    </div>
</div>

Answer 1

您可以使用!important后缀来覆盖样式。或者甚至更好，使#NewDiv的规则更明确，例如：

window .div #NewDiv

Answer 2

由于.div中的拼写错误，您的第一个选择器出错了。您的HTML中没有<div class="div">个。因此，没有任何东西被赋予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;
}

Answer 3

正如BoltClock所说，“。div”在你的CSS中应该是“div”，因为你没有在你的html中将它作为一个类应用。

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

.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;
}

需要覆盖级联风格

3 个答案: