Question

除了我正在做的事情，因为它似乎不起作用，这样做有可能吗？我希望能够在类的子类下专门为该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标准的做事方式。

Answer 1

只需要添加一个空格：

.area2 .item
{
    ...
}

Answer 2

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

.area1.item
{
    color:red;
}

这意味着：

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

如：

<div class="area1 item">

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

Answer 3

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

.area1.item
{
    color:red;
}

应该是

.area1 .item
{
    color:red;
}

Answer 4

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

Answer 5

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

.area1 .item
{
    color:red;
}

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

Answer 6

在你的班级之间加一个空格

.area1 .item
{
    ...
}

这是CSS Selectors的一个非常好的参考。

Answer 7

继上面的kR105回复之后：

我的问题类似于OP（原始海报），只发生在一个表之外，所以子类不是从父类（表）的范围内调用的，而是在它之外，所以我有ADD选择器，如kR105所述。

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

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}

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

Answer 8

这是CSS的支柱， Cascading 样式表中的“级联”。

如果您在一行中编写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元素。

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

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

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

.area2.area2Larger { ... }

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

Answer 9

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

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

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

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Answer 10

例如，您在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>

Answer 11

kR105写道：

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

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

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

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

框的边框和文字将为蓝色，因为.box2的样式会分配这些值。

同样在我之前的帖子中，我应该强调添加选择器与我在一个类中创建子类不同（此线程中的第一个解决方案）），虽然效果相似。

CSS课程＆amp;子类

11 个答案: