CSS类和子类

102

除了我因为似乎不起作用而正在做的事情之外，还有可能这样做吗？我希望能够有一个类下的子类，以专门用于该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>

这样我就可以对父CSS类“ area1”，“ area2”下的元素使用class =“ item”。我知道我可以使用class =“ area1 item”使它起作用，但我不明白为什么它必须如此冗长。为了定义它，css子类不应该查看它在哪个父类下吗？

注意：这在IE中有效（目前使用7），但在FF中则无效，因此我假设这不是CSS标准的处理方式。

css

— 瑞安·雅培（Ryan Abbott）
source

182

只需添加一个空格：

.area2 .item
{
    ...
}

— 乍得·伯奇
source

我本人并没有真正使用子类……有人可以给我一个必要的理由吗？

— patricksweeney

2

子类只是在适当的情况下为CSS规则添加更多特殊性的另一种方法。您可以拥有一个主类，但是可以根据元素在文档中的位置来更改其规则。

— 马特·豪威尔

74

仅供参考，当您像上面一样定义规则时，两个选择器链接在一起：

.area1.item
{
    color:red;
}

它的意思是：

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

如：

<div class="area1 item">

可悲的是，它在IE6中不起作用，但这就是它的意思。

— 马特·豪威尔
source

1

这实际上是我想要的东西，感谢您的解释！

— F-3000

我知道这很古老，但您是说“ area1”还是“ item”而不是“ area1”和“ item”？这有很大的不同。

— Mgamerz 2014年

非常感谢，我想尽办法解决这个问题。

— user3547774

26

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

.area1.item
{
    color:red;
}

应该

.area1 .item
{
    color:red;
}

— 鹦鹉
source

14

您是否要强迫只选择孩子？ 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;
}

— 克里斯特先生
source

1

这不是我的想法，但是如果我只想要直子，这是一个很好的信息。谢谢！

— 瑞安·阿伯特

不知道那一个。感谢您的克里斯特先生

— 塞巴斯蒂安·萨斯特尔2013年

10

只需在.area1和.item之间放置一个空格，例如：

.area1 .item
{
    color:red;
}

此样式适用于类为area1的元素中具有类item的元素。

— M4N
source

8

只需在您的班级之间留一个空格

.area1 .item
{
    ...
}

这是CSS选择器的很好参考。

— 姆比亚德
source

6

接下来是kR105的回复：

我的问题类似于OP（原始发布者）的问题，仅在表外部发生，因此子类不在父类（表）的范围内调用，而是在其外部调用，因此我不得不添加选择器，如kR105所述。

问题出在这里：我有两个框（div），每个框都有相同的边框半径（HTML5），填充和边距，但需要使它们具有不同的颜色。我不想为每个颜色类重复这3个参数，而是希望一个“超类”包含边界半径/填充/边距，然后仅使用单个“子类”来表达它们的差异（每个双子双引号不是真正的子类-请参阅我的后续文章）。结果是这样的：

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}

希望有人觉得这有帮助。

— 最大
source

3

那就是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 IGNORES是多类规则中的第一个选择器，因此IE6实际上将.area1.larger规则应用为

/*.area1*/.larger { ... }

这意味着它将影响所有.larger元素。

这是IE6中非常令人讨厌和不幸的错误（很多错误中的一个），如果您想要一个干净的跨浏览器CSS文件，则迫使您几乎永远不要使用CSS的该功能。

然后，解决方案是使用CSS类名前缀以避免与通用类名冲突：

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

也可以只使用一个类，但是这样一来，您可以将CSS保持在您想要的逻辑中，同时知道.area1Larger仅影响.area1等。

1

例如，您在div上应用的类可以用作该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>

— 乔治·威斯科姆
source

1

你也可以在这样的元素中有两个类

<div class = "item1 item2 item3"></div>

班级中的每个项目都是自己的班级

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
source

1

kR105写道：

你也可以在这样的元素中有两个类

<div class = "item1 item2 item3"></div

我看不到它的价值，因为按照级联样式的原则，最后一个优先。例如，如果在我之前的示例中，我将HTML更改为

 <div class="box1 box2"> Hello what is my color? </div>

该框的边框和文本将为蓝色，因为.box2的样式会指定这些值。

同样在我以前的文章中，我应该强调指出，尽管添加效果与在类中创建子类（在该线程中的第一个解决方案）不同，但是添加添加选择器并不相同。

— 最大
source