CSS类和子类
除了我在做什么以外，有没有可能做到这一点？ 我希望能够有一个类下的子类专门为该class.subclass使用CSS。
CSS
.area1 { border:1px solid black; } .area1.item { color:red; } .area2 { border:1px solid blue; } .area2.item { color:blue; } HTML
<div class="area1"> <table> <tr> <td class="item">Text Text Text</td> <td class="item">Text Text Text</td> </tr> </table> </div> <div class="area2"> <table> <tr> <td class="item">Text Text Text</td> <td class="item">Text Text Text</td> </tr> </table> </div>
所以我可以使用class =“item”作为父css类“area1”，“area2”下的元素。 我知道我可以使用class =“area1 item”来使这个工作，但我不明白为什么它必须如此详细。 css子类不应该查看它所属的父类是为了定义它吗？
注意：这个工作在IE中（现在使用7），但是在FF中没有，所以我假设这不是一个CSS标准的做法。
只需要添加一个空间：
.area2 .item { ... }
仅供参考，当您像上面那样定义一条规则时，将两个select器链接在一起：
.area1.item { color:red; }
它的意思是：
将此样式应用于同时具有类“area1”和“item”的任何元素。
如：
<div class="area1 item">
可悲的是，它不适用于IE6，但这就是它的意思。
你的问题似乎是CSS中的两个类之间的空白：
.area1.item { color:red; }
应该
.area1 .item { color:red; }
你想强制只有孩子被选中？ http://css.maxdesign.com.au/selectutorial/selectors_child.htm
.area1 { border:1px solid black; } .area1>.item { color:red; } .area2 { border:1px solid blue; } .area2>.item { color:blue; }
只需在.area1和.item之间放置一个空格，例如：
.area1 .item { color:red; }
此样式适用于具有类area1的元素内类元素的元素。
只需在你的课堂之间放置一个空间
.area1 .item { ... }
这是CSSselect器的一个很好的参考。
这是CSS的骨干， 层叠样式表中的“级联”。
如果您将CSS规则写入单行，则可以更轻松地查看结构：
.area1 .item { color:red; } .area2 .item { color:blue; } .area2 .item span { font-weight:bold; }
使用多个类也是CSS的一个很好的中级/高级使用，不幸的是有一个众所周知的IE6错误，在编写跨浏览器代码时会限制这种用法：
<div class="area1 larger"> .... </div> .area1 { width:200px; } .area1.larger { width:300px; }
IE6 忽略多类规则中的第一个select器，所以IE6实际上将.area1.larger规则应用为
/*.area1*/.larger { ... }
这意味着会影响到所有更大的元素。
这是一个非常讨厌和不幸的错误（在众多的IE6中的一个），如果你想要一个干净的跨浏览器的CSS文件，就迫使你几乎不使用CSS的这个特性。
然后，解决scheme是使用CSS类名前缀来避免与通用类名冲突：
.area1 { ... } .area1.area1Larger { ... } .area2.area2Larger { ... }
也可以只使用一个类，但这样你可以保持CSS的逻辑你想要的，而知道.area1Larger只影响.area1等
继上述kR105的回复之后：
我的问题与OP（原始海报）类似，只发生在表外，所以子类不是在父类（表）的范围内调用，而是在其外部，所以我必须添加select器，正如kR105所提到的。
这是问题：我有两个盒子（div），每个盒子都有相同的边框半径（HTML5），填充和边距，但需要使它们具有不同的颜色。 我不想为每个颜色类别重复这3个参数，而是想要一个“超类”包含边界半径/填充/边距，然后只是个别的“子类”来expression它们之间的差异（双引号，因为它们不是真正的子类 – 看我以后的post）。 这是如何解决的：
HTML：
<body> <div class="box box1"> Hello my color is RED </div> <div class="box box2"> Hello my color is BLUE </div> </body>
CSS：
div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px} div.box1 {border:3px solid red; color:red} div.box2 {border:3px solid blue; color:blue}
希望有人认为这有帮助。
例如，您在div上应用的类可以用作样式元素的参考点。
<div class="area1"> <table> <tr> <td class="item">Text Text Text</td> <td class="item">Text Text Text</td> </tr> </table> </div> .area1 { border:1px solid black; } .area1 td { color:red; } /* This will effect any TD within .area1 */
要超级语义，你应该把这个类移到桌子上。
<table class="area1"> <tr> <td>Text Text Text</td> <td>Text Text Text</td> </tr> </table>
你也可以在这样的元素中有两个类
<div class = "item1 item2 item3"></div>
class上每个项目都是自己的class级
.item1 { background-color:black; } .item2 { background-color:green; } .item3 { background-color:orange; }
kR105写道：
你也可以在这样的元素中有两个类
<div class = "item1 item2 item3"></div
我看不到这个价值，因为通过级联风格的原则，最后一个优先。 例如，如果在我之前的例子中，我改变了HTML阅读
<div class="box1 box2"> Hello what is my color? </div>
该框的边框和文本将是蓝色的，因为.box2的样式分配这些值。
在我以前的文章中，我应该强调，像我一样添加select器与在类中创build子类不同（该线程中的第一个解决scheme），尽pipe效果类似。
