CSS 类和子类

有没有可能，除了我正在做的事情，因为它似乎不起作用，做到这一点？我希望能够拥有一个类下面的子类，以便专门为 class.subclass 使用 CSS。

CSS

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

超文本标示语言

<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>

So that I can just use class="item" for the elements under the parent css class "area1","area2". I know I can use class="area1 item" to get this to work, but I don't understand why it has to be so verbose about it. Shouldn't the css subclass look at what parent class it is under in order to define it?

注意: 这在 IE 中可以工作(现在使用7) ，但是在 FF 中不能，所以我假设这不是一个 CSS 标准的做事方式。

409495 次浏览
小开
最佳答案

只需要加一个空格:

.area2 .item
{
...
}
小开

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

.area1.item
{
color:red;
}

应该是

.area1 .item
{
color:red;
}
小开

在. area 1和. item 之间放一个空格，例如:

.area1 .item
{
color:red;
}

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

小开

是否要强制只选择儿童

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

在你们的课间留出空间

.area1 .item
{
...
}

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

小开

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

.area1.item
{
color:red;
}

意思是:

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

例如:

<div class="area1 item">

遗憾的是，它不能在 IE6中工作，但这就是它的意思。

小开

也可以在类似这样的元素中包含两个类

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

类中的每个项都是它自己的类

.item1 {
background-color:black;
}


.item2 {
background-color:green;
}


.item3 {
background-color:orange;
}
小开

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

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

这意味着它将影响所有。较大的元素。

如果你想要一个干净的跨浏览器的 CSS 文件，这是 IE6中一个非常令人讨厌和不幸的 bug (众多 bug 之一) ，迫使你几乎永远不要使用 CSS 的这个特性。

因此，解决方案是使用 CSS 类名前缀，以避免与通用类名发生冲突:

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


.area2.area2Larger { ... }

May as well use just one class, but that way you can keep the CSS in the logic you intended, while knowing that .area1Larger only affects .area1, etc.

小开

应用于 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>
小开

以下是 kR105的上述答复:

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

Here was the problem: I had two boxes (divs), each with the same border-radius (HTML5), padding and margin, but needed to make them different colors. Rather than repeat those 3 parameters for each color class, I wanted a "superclass" to contain border-radius/padding/margin, then just individual "subclasses" to express their differences (double quotes around each as they're not really subclasses - see my later post). Here's how it worked out:

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}

希望有人觉得这个有用。

小开

kR105 wrote:

也可以在类似这样的元素中包含两个类

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

I can't see the value of this, since by the principle of cascading styles, the last one takes precedence. For example, if in my earlier example I changed the HTML to read

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

框的边框和文本应该是蓝色的，因为.box2的样式分配这些值。

同样在我之前的文章中，我应该强调我所做的 增加选择器不同于在类中创建 子类(这个线程中的第一个解决方案) ，尽管效果是相似的。

小开

除了嵌套类之间所需的空间之外:

.area2 .item
{
...
}

有一个名为 Sass 的 css 预编译器可以帮助您解决 css 的冗长问题。它使用扩展名。您可以搜索使用它的完整方法，但是在使用时，您的代码的情结可以简化为以下内容:

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


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

提交答案