html - 如何防止css继承？

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/