2

当您在 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/

4

5 回答 5

6

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

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

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

于 2012-04-28T18:20:48.743 回答
2

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

于 2012-04-28T18:21:10.653 回答
2

这与继承无关。

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

于 2012-04-28T18:28:13.257 回答
0

你可以用这个

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

如果你使用.main-content > span这种风格只会影响班级的immediate child跨度.main-content

于 2012-04-28T18:23:45.670 回答
0

只需在您的根元素处使用 all: initial 。

.selector 
{
    all: initial;
}
于 2019-04-07T11:18:27.147 回答