Question

当你在css类中添加样式时，CSS有什么烦恼，它可能会自己应用其他元素/类。

防止这种情况的最佳方法是什么？

例如：

HTML：

<div class='main-content'>
    <p> Hello World </p> 
    <span> Test One </span>
    <div class='column'>
        <span> Test Two</span>
    </div> 
</div>

CSS：

.main-content span {
    background: #921192;
    color: white;
    padding: 3px 4px;
    margin: 0 5px;
}


.column  span {
    font-size:20px;
    text-transform:none;
    display:inline-block;
}

我不希望“测试二”<span>具有背景颜色。

测试：http://jsfiddle.net/szm9c/1/

Answer 1

使用实际选择所需元素的选择器。在这种情况下>，child selector就足够了。

.main-content > span {
    background: #921192;
    color: white;
    padding: 3px 4px;
    margin: 0 5px;
}

http://jsfiddle.net/mattball/mQFz2/

Answer 2

使用.main-content > span，只选择直接后代元素。

Answer 3

这与继承无关。

要正确使用CSS，请使用仅与您希望影响的元素匹配的选择器为元素指定属性。（给出的例子对于有用的分析和对更好的方法的建设性建议来说太过于人为。）

Answer 4

您可以使用此

.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}

如果您使用.main-content > span，那么该格式只会影响immediate child类的.main-content范围

Answer 5

只需使用all：在您的根元素中开头。

.selector 
{
    all: initial;
}

如何防止css继承？

5 个答案: