CSS 类和子类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/558721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Classes & SubClasses
提问by Ryan Abbott
Is it possible, other than what I'm doing because it doesn't seem to work, to do this? I want to be able to have subclasses that are under a class to use the CSS specifically for that class.subclass.
除了我正在做的事情，因为它似乎不起作用，是否有可能做到这一点？我希望能够拥有一个类下的子类来使用专门用于该 class.subclass 的 CSS。
CSS
CSS
.area1
{
border:1px solid black;
}
.area1.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2.item
{
color:blue;
}
HTML
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>
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?
这样我就可以将 class="item" 用于父 css 类“area1”、“area2”下的元素。我知道我可以使用 class="area1 item" 来让它工作，但我不明白为什么它必须如此冗长。css 子类不应该查看它所在的父类来定义它吗？
Note: this works in IE (using 7 right now), but in FF it does not, so I'm assuming this isn't a CSS standard way of doing something.
注意：这在 IE 中有效（现在使用 7），但在 FF 中无效，所以我假设这不是做某事的 CSS 标准方式。
回答by Chad Birch
Just need to add a space:
只需要添加一个空格：
.area2 .item
{
...
}
回答by Matt Howell
FYI, when you define a rule like you did above, with two selectors chained together:
仅供参考，当您像上面那样定义规则时，将两个选择器链接在一起：
.area1.item
{
color:red;
}
It means:
它的意思是：
Apply this style to any element that has both the class "area1" and "item".
将此样式应用于同时具有“area1”和“item”类的任何元素。
Such as:
如：
<div class="area1 item">
Sadly it doesn't work in IE6, but that's what it means.
遗憾的是它在 IE6 中不起作用，但这就是它的意思。
回答by Parrots
Your problem seems to be a missing space between your two classes in the CSS:
您的问题似乎是 CSS 中两个类之间缺少空格：
.area1.item
{
color:red;
}
Should be
应该
.area1 .item
{
color:red;
}
回答by MrChrister
do you want to force only children to be selected? http://css.maxdesign.com.au/selectutorial/selectors_child.htm
你想强制选择只有孩子吗？ 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;
}
回答by M4N
Just put a space between .area1 and .item, e.g:
只需在 .area1 和 .item 之间留一个空格，例如：
.area1 .item
{
color:red;
}
this style applies to elements with class item inside an element with class area1.
此样式适用于类为 area1 的元素内具有类 item 的元素。
回答by mbillard
Just put a space between your classes
只需在课程之间留一个空格
.area1 .item
{
...
}
Here's a very good reference for CSS Selectors.
这是CSS Selectors的一个很好的参考。
回答by maximus
Following on from kR105's reply above:
继上面 kR105 的回复之后：
My problem was similar to that of the OP (Original Poster), only occurred outside a table, so the subclasses were not called from within the scope of the parent class (the table), but outside of it, so I had to ADD selectors, as kR105 mentioned.
我的问题与 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:
问题是：我有两个框（div），每个框都具有相同的边框半径（HTML5）、填充和边距，但需要使它们具有不同的颜色。而不是为每个颜色类重复这 3 个参数，我想要一个“超类”来包含边界半径/填充/边距，然后只是单独的“子类”来表达它们的差异（每个都用双引号，因为它们不是真正的子类 -见我后来的帖子）。这是它的结果：
HTML:
HTML：
<body>
<div class="box box1"> Hello my color is RED </div>
<div class="box box2"> Hello my color is BLUE </div>
</body>
CSS:
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}
Hope someone finds this helpful.
希望有人觉得这有帮助。
回答by maximus
That is the backbone of CSS, the "cascade" in CascadingStyle Sheets.
这就是 CSS 的支柱，即层叠样式表中的“层叠” 。
If you write your CSS rules in a single line it makes it easier to see the structure:
如果将 CSS 规则写在一行中，则可以更轻松地查看结构：
.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }
Using multiple classes is also a good intermediate/advanced use of CSS, unfortunately there is a well known IE6 bug which limits this usage when writing cross browser code:
使用多个类也是 CSS 的一个很好的中级/高级用法，不幸的是有一个众所周知的 IE6 错误，它在编写跨浏览器代码时限制了这种用法：
<div class="area1 larger"> .... </div>
.area1 { width:200px; }
.area1.larger { width:300px; }
IE6 IGNORESthe first selector in a multi-class rule, so IE6 actually applies the .area1.larger rule as
IE6忽略多类规则中的第一个选择器，因此 IE6 实际上将 .area1.larger 规则应用为
/*.area1*/.larger { ... }
Meaning it will affect ALL .larger elements.
这意味着它将影响所有 .larger 元素。
It's a very nasty and unfortunate bug (one of many) in IE6 that forces you to pretty much never use that feature of CSS if you want one clean cross-browser CSS file.
这是 IE6 中一个非常讨厌和不幸的错误（众多错误之一），如果您想要一个干净的跨浏览器 CSS 文件，它会迫使您几乎从不使用 CSS 的该功能。
The solution then is to use CSS classname prefixes to avoid colliding wiht generic classnames:
解决方案是使用 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.
也可以只使用一个类，但这样你就可以将 CSS 保持在你想要的逻辑中，同时知道 .area1Larger 只影响 .area1 等。
回答by George Wiscombe
The class you apply on the div can be used to as a reference point to style elements with that div, for example.
例如，您在 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 */
To be super semantic you should move the class onto the table.
要成为超级语义，您应该将类移到表上。
<table class="area1">
<tr>
<td>Text Text Text</td>
<td>Text Text Text</td>
</tr>
</table>
回答by George Wiscombe
you can also have two classes within an element like this
你也可以像这样在一个元素中有两个类
<div class = "item1 item2 item3"></div>
<div class = "item1 item2 item3"></div>
each item in the class is its own class
类中的每个项目都是它自己的类
.item1 {
background-color:black;
}
.item2 {
background-color:green;
}
.item3 {
background-color:orange;
}
