CSS 类重用/自动填充答案

【问题标题】：CSS class reuse / auto populateCSS 类重用/自动填充
【发布时间】：2009-07-16 03:05:35
【问题描述】：

假设我有一个 css 类名

div.TestClass
{
     float:left;etc//
}

span.SpanTestClass
{
     float:right;etc//
}

在我的表单上，我有很多跨度和 div。

是否有一种简单的方法可以为我的 span 和 div 实现所有类，而不是在我创建新的 span 或 div 时将它们全部输入？而不是这个：

<span id=span1 class=SpanTestClass></span>
<span id=span2 class=SpanTestClass></span>
<span id=span3 class=SpanTestClass></span>
<span id=span4 class=SpanTestClass></span>

像这样：

<div id="someDiv" class="someclass">
<span id=span1></span>
<span id=span2></span>
<span id=span3></span>
<span id=span4></span>
</div>

干杯

【问题讨论】：

标签： css stylesheet

【解决方案1】：

CSS

.someDiv{
color:#353535;
}

.someDiv span{
font-weight:bold;
color:red;
}

HTML

<div class="someDiv">

Hello <span>World!</span>

</div>

在 div 中使用 'someDiv' 作为其类的任何 span 标签都将具有红色 + 粗体文本。

【讨论】：

我的问题是，我可以设置类而不是 css 属性吗？像里面的 .someDiv span{ class="ClassA" }

【解决方案2】：

没有办法将 id 和 classes 从父元素应用到子元素，这就是我认为您要问的问题。也没有理由需要。

HTML：

<div id="divid" class="divclass">
    <span class="otherclass"> ... </span>
    <span class="otherclass"> ... </span>
    <span> ... </span>
    <span> ... </span>
    <a href="#" class="otherclass"> ... </a>
</div>

如果你想定位这个特定 div 中的所有元素：

#divid * {
    ...
}

如果您想定位此特定 div 中的所有跨度：

#divid span {
    ...
}

如果你想在这个特定的 div 中使用 otherclass 的类来定位所有元素：

#divid .otherclass {
    ...
}

如果您只想使用 otherclass 的类来定位此特定 div 中的跨度：

#divid span.otherclass {
    ...
}

如果您想使用 divclass 定位所有 div（而不仅仅是使用 divid 的那个），只需将以上所有内容中的 #divid 替换为 .divclass。

【讨论】：

我认为最后一种可能性正是您正在寻找的。span>

【解决方案3】：

是的，您可以使用

#someDiv span {
   //
}

【讨论】：

请记住，使用该规则，someDiv 中的所有 spans 都将采用该样式。