代码之家 › 专栏 › 技术社区 › Soldarnal

定义类组合的样式

css

Soldarnal · 技术社区 · 17 年前

有没有一种方法来定义类组合的样式?例如,我希望我的HTML看起来像这样,但是要以适当的颜色呈现的输出:

<span class="red">Red Text</span><br/>
<span class="green">Green Text</span><br/>
<span class="red green">Yellow Text</span><br/>

编辑: 当它只是一个例子时,上面的内容似乎让人困惑;因此下面是另一个例子:

<style>
    .style1 { background-color: #fff; }
    .style2 { background-color: #eee; }
    .style1.highlight { color: red; }
    .style2.highlight { color: blue; }
</style>

<ul>
    <li class="action style1">Do Action 1</li>
    <li class="action style2">Do Action 2</li>
    <li class="action style1 highlight">Do Action 1</li>
    <li class="action style2 highlight">Do Action 2</li>
</ul>

<script language="javascript" type="text/javascript">
$("li.action").bind("click", function(e) {
    e.preventDefault();

    // Do some stuff 

    $(this).addClass("highlight");
    $(this).unbind("click");
});
</script>

再说一次,这只是例子所以不要挂在交替的元素或类似的东西上。我试图避免的是必须为每个不同的样式复制绑定函数,或者必须编写一个ELSEIF结构来检查每个样式类。不幸的是,这段代码在IE6或IE7中不起作用-突出显示的.STYLE1和.STYLE2元素文本最终都是蓝色的。

6 回复 | 直到 17 年前

ieure 17 年前

您可以选择多个类:

span.red.green { color: yellow; }

这将应用于具有红色和绿色类的任何跨度元素。这可能不是你想要的,因为它也适用于,比如:

<span class="red green blue">white</span>

注意,这在IE 6中不能正常工作。

stesch 17 年前

当然。

.red { color: red; }
.green { color: green; }
.red.green { color: yellow; }

Pim Jager 17 年前

您可以使用javascript来完成这项工作,尽管我最好只创建一个黄色类,如果您对javascript方法感兴趣,请发表评论(我需要考虑一下,并且只在您的逻辑层中这样做会更有效率)。

编辑 γ 更多编辑(为当前颜色添加regex)
好吧,你不感兴趣,但我还是要写它,因为它看起来很有趣:

var re = /([0-9]?)/g;
$("span").each( function(){
 $this = $(this);
 results = re.exec( $this.css('background-color')); // background is something like: 'rgb( 0, 132, 12)'
 var sRed = results[1];
 var sGreen = results[2];
 var sBlue = results[3];
 /* OLD!
 var sRed = '0';
 var sGreen = '0';
 var sBlue = '0';*/
 if($this.hasClass('red')) { sRed = '255'; }
 if($this.hasClass('green')) { sGreen = '255'; }
 if($this.hasClass('blue')) { sBlue = '255'; }
 $this.css('background-color', 'rgb(' + sRed + ',' + sGreen + ',' + sBlue ')';
});

您将需要jquery来实现这一点,尽管您可能不需要jquery就可以做到。

Steven A. Lowe 17 年前

你为什么要这样做?可能有可能,但我看不出有什么好处。你还会定义class=“short fat”和class=“tall thin”还是class=“light dark”?为了清晰和重用,类应该是简单和特定的。当不必要且可能混淆时,应避免多重继承(假继承或其他继承)。

class="red green"

令人困惑

class="yellow"

简洁明了

编辑:我看到了第二个例子,我的建议保持不变。一个类简洁明了,两个类可能混淆。假设这是可行的(我认为是可行的),那么在最流行的浏览器(IE)上花费大量的精力来对抗bug可能是不值得的。

Soldarnal 17 年前

这是我的解决方法:

<style>
    .style1 { background-color: #fff; }
    .style2 { background-color: #eee; }
    .style1 .highlight { color: red; }
    .style2 .highlight { color: blue; }
</style>

<ul>
    <li class="action style1"><span>Do Action 1</span></li>
    <li class="action style2"><span>Do Action 2</span></li>
    <li class="action style1"><span class="highlight">Do Action 1</span></li>
    <li class="action style2"><span class="highlight">Do Action 2</span></li>
</ul>

<script language="javascript" type="text/javascript">
$("li.action").bind("click", function(e) {
    e.preventDefault();

    // Do some stuff 

    $(this).children("span").addClass("highlight");
    $(this).unbind("click");
});
</script>

它不像我希望的那样优雅。它对每个项目都使用一个额外的元素;但至少它还是相当干净的。

-1

Tarik 17 年前

也许像这样

.red
{
color: red;
}

.red_green
{
color: #AS8324;
}

你可以使用你的HTML代码

<span class="red">Red Text</span><br/>
<span class="green">Green Text</span><br/>
<span class="red_green">Yellow Text</span><br/>

我不知道这正是你想要的,但这是我的方法。希望能有所帮助。