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效果类似。