除了我正在做的事情,因为它似乎不起作用,这样做有可能吗？我希望能够拥有一个类下的子类,专门为该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标准的做事方式.
Cha*_*rch 178
只需要添加一个空格:
.area2 .item
{
...
}
Mat*_*ell 72
仅供参考,当你定义一个像上面那样的规则时,两个选择器被链接在一起:
.area1.item
{
color:red;
}
它的意思是:
将此样式应用于同时具有"area1"和"item"类的任何元素.
如:
<div class="area1 item">
可悲的是,它在IE6中不起作用,但这就是它的含义.
Par*_*ots 26
您的问题似乎是CSS中两个类之间缺少的空间:
.area1.item
{
color:red;
}
应该
.area1 .item
{
color:red;
}
MrC*_*ter 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;
}
M4N*_*M4N 10
只需在.area1和.item之间放一个空格,例如:
.area1 .item
{
color:red;
}
此样式适用于具有类area1的元素内具有类项的元素.
继上面的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}
希望有人觉得这很有帮助.
| 归档时间： |
|
| 查看次数： |
321105 次 |
| 最近记录： |