Css 定义类组合的样式_Css - Fatal编程技术网

Css 定义类组合的样式

css

Css 定义类组合的样式,css,Css,有没有一种方法可以为类的组合定义样式？例如，我希望我的HTML看起来像这样，但要以适当的颜色呈现的输出： Red Text Green Text Yellow Text 红色文本绿色文本黄色

有没有一种方法可以为类的组合定义样式？例如，我希望我的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>


.style1{背景色：#fff；}
.style2{背景色：#eee；}
.style1.突出显示{颜色：红色；}
.style2.highlight{color:blue；}

执行操作1
执行操作2
执行动作1
执行动作2

$（“li.action”）.bind（“单击”，函数（e）{
e、 预防默认值（）；
//做点什么
$（此）.addClass（“突出显示”）；
$（此）。解除绑定（“单击”）；
});

同样，这只是一个例子，所以不要被交替元素或类似的东西所困扰。我试图避免的是必须为每个不同的styleN复制bind函数，或者必须编写一个elseif结构来检查每个styleN类。不幸的是，此代码在IE 6或7中不起作用-突出显示的.style1和.style2元素的文本最终都是蓝色。

您可以在多个类上选择：

span.red.green { color: yellow; }

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

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

白色

请注意，这在IE 6中不起作用。

可能是这样的

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

红色文本

绿色文本

黄色文本

我不知道这是你想要的，但这是我的方法。希望有帮助。

当然

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

您可以使用Javascript来实现这一点，尽管我认为创建一个黄色类会更好，如果您对Javascript方法感兴趣，请发表评论（我需要考虑一下，在您的逻辑层中这样做会更有效）

编辑|更多编辑（为当前颜色添加正则表达式）
好吧，你不感兴趣，但我还是要写它，因为它看起来很有趣：

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

为什么要这样做？这可能是可能的，但我看不到好处。您是否还要定义class=“short fat”和class=“tall thin”或class=“light dark”呢？为了清晰和重用，类应该简单而具体。多重继承（伪造或其他）在不必要且可能混淆时应避免

class="red green"

令人困惑

class="yellow"

简洁明了

编辑：我看到了第二个例子，我的建议没有改变。一个类简洁明了，两个可能会让人困惑。假设这应该是可行的（我认为是的），花大力气在最流行的浏览器（IE）中消除bug可能是不值得的。

以下是我的解决方法：

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


.style1{背景色：#fff；}
.style2{背景色：#eee；}
.style1.突出显示{color:red；}
.style2.突出显示{color:blue；}

执行操作1
执行操作2
执行操作1
执行操作2

$（“li.action”）.bind（“单击”，函数（e）{
e、 预防默认值（）；
//做点什么
$（this.children（“span”）.addClass（“highlight”）；
$（此）。解除绑定（“单击”）；
});

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

Hmm…在IE7中似乎也不起作用（绿色的跨度是黄色的），这是一种交易破坏者。IE将此作为一个或不是一个AND来解决，即它将匹配任何带有“绿色”的元素同学们。你可以用正确的设计来解决这个问题，但不总是这样。如果你能给我们一个具体的目标，我们也许能够解决这个问题。非常好！不幸的是，我实际上并不想对颜色做任何事；这只是我使用的示例。啊，好吧，没关系，写起来仍然很有趣，有一天可能会很方便。对不起，我不应该用它两个相互矛盾的类，就像我在第一个示例中所做的那样。请看我的第二个示例。@Soldarnal:如果组合在IE中不起作用，你愿意花多少精力在最流行的浏览器中与bug作斗争？特别是当替代方案“生成另一个类”如此简单时。。。？