当我选择一个元素时,它会选择所有个子元素。例如
div {
border: solid;
}
<div>
<p>
Some Text
</p>
<div>
<p>
Some Text
</p>
</div>
<p>
Some Text
</p>
</div>
这不仅使大 div的边界牢固,而且使内部 div的边界牢固。
编辑:有没有一种方法可以选择较高的div,而无需创建类?
答案 0 :(得分:0)
您正在将样式应用于所有div,由于存在差异,它会创建一个类
.parent {
border: solid black 1px;
}
.child {
border: solid green 1px
}
<div class="parent">
<p>
Some Text
</p>
<div class="child">
<p>
Some Text
</p>
</div>
<p>
Some Text
</p>
</div>
答案 1 :(得分:0)
CSS选择器会将其样式应用于所有匹配的元素。如果您的样式使用div
来匹配元素,则相关样式将应用于HTML中的所有div
元素。 (它不适用于任何p
元素,因为它们不匹配)。在定位元素时,您需要找到一种更具体的方法。
一种方法可能是在HTML中向div添加一个类。例如div class="border-div"> ... </div>
。现在可以使用选择器.border-div { ...
在样式表中定位该元素。
另一种方法可能是使用一个选择器来定位父元素,而使用另一个选择器来定位子元素。例如,您可以像已经完成的那样将父div作为目标:使用选择器div { ...
。但是您可以进一步定位其子级,并使用div div {...
覆盖设置为父级的样式。更具体的选择器将始终覆盖较不具体的选择器。
有关有效CSS选择器的更多信息,请参见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors