CSS类和子类

除了我正在做的事情,因为它似乎不起作用,这样做有可能吗？我希望能够拥有一个类下的子类,专门为该class.subclass使用CSS.

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

    

        

            
Text Text Text
            
Text Text Text
        
    

 
    

        

            
Text Text Text
            
Text Text Text
        
    

这样我就可以使用class ="item"作为父css类"area1","area2"下的元素.我知道我可以使用class ="area1 item"来实现这一点,但我不明白为什么它必须如此冗长.css子类不应该查看它所在的父类以便定义它吗？

注意:这适用于IE(现在使用7),但在FF中它没有,所以我假设这不是CSS标准的做事方式.

1> Chad Birch..：

---

只需要添加一个空格:

.area2 .item
{
    ...
}

---

子类只是在适当的情况下为CSS规则添加额外特异性的另一种方法.您可以拥有一个主类,但您可以根据元素在文档中的位置更改元素的规则.

2> Matt Howell..：

---

仅供参考,当你定义一个像上面那样的规则时,两个选择器被链接在一起:

.area1.item
{
    color:red;
}

它的意思是:

将此样式应用于同时具有"area1"和"item"类的任何元素.

如:

可悲的是,它在IE6中不起作用,但这就是它的含义.

3> Parrots..：

---

您的问题似乎是CSS中两个类之间缺少的空间:

.area1.item
{
    color:red;
}

应该

.area1 .item
{
    color:red;
}

4> MrChrister..：

---

你想强制只选择孩子吗？ 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;
}

5> M4N..：

---

只需在.area1和.item之间放一个空格,例如:

.area1 .item
{
    color:red;
}

此样式适用于具有类area1的元素内具有类项的元素.

6> mbillard..：

---

只需在课程之间留一个空格

.area1 .item
{
    ...
}

这是CSS选择器的一个很好的参考.

7> maximus..：

---

继上面的kR105回复之后:

我的问题类似于OP(原始海报),只发生在一个表外,所以子类不是从父类(表)的范围内调用的,而是在它之外,所以我不得不添加ADD选择器,正如kR105所述.

问题出在这里:我有两个盒子(div),每个盒子都有相同的边框半径(HTML5),填充和边距,但需要使它们具有不同的颜色.我不想为每个颜色类重复这3个参数,而是希望"超类"包含border-radius/padding/margin,然后只需要单独的"子类"来表达它们的差异(每个参数都是双引号,因为它们不是真正的子类 - 看我后来的帖子).以下是它如何解决的问题:

HTML:

  
 Hello my color is RED 
  
 Hello my color is BLUE 

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}

希望有人觉得这很有帮助.