如何防止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

使用实际选择所需元素的选择器.在这种情况下>,子选择器就足够了.

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

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