如何指定CSS类的顺序? [英] How to specify the order of CSS classes?

查看:99
本文介绍了如何指定CSS类的顺序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对CSS和 class 属性有点困惑。我一直认为,我在属性值中指定多个类的顺序是有意义的。后面的课可以/应该覆盖前面的定义,但这似乎不起作用。以下是一个例子:

 < html> 
< head>
< style type =text / css>
.extra {
color:#00529B;
border:1px solid#00529B; / *蓝色* /
背景颜色:#BDE5F8;
}

.basic {
border:1px solid #ABABAB;
}
< / style>
< / head>
< body>
< input type =textvalue =basicclass =basic/>
< input type =textvalue =extraclass =extra/>
< input type =textvalue =basic extraclass =basic extra/>
< input type =textvalue =extra basicclass =extra basic/>
< / body>
< / html>

我想,第三个例子是 class =basic extra应该有蓝色边框,因为额外指定的边框会覆盖基本边框。



我在ubuntu 9.04上使用FF 3

解决方案

顺序类的属性被覆盖的顺序不是由class属性中的类定义的顺序来指定的,而是它们出现在css中的位置

  .myClass1 {font-size:10pt; color:red} 
.myClass2 {color:green;}

HTML

 < div class =myClass2 myClass1>文字在这里< / DIV> 



div中的文本将显示为绿色,而不是红色,因为myClass2在CSS定义中向下我的班级1。如果我要交换类属性中类名的顺序,则不会有任何变化。


I'm a little confused about CSS and the class attribute. I always thought, the order in which I specify multiple classes in the attribute value has a meaning. The later class could/should overwrite definitions of the previous, but this doesn't seem to work. Here's an example:

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

I would expect, the third example with class="basic extra" should have a blue border, since the in extra specified border would overwrite the border from basic.

I'm using FF 3 on ubuntu 9.04

解决方案

The order in which a class' attributes are overwritten is not specified by the order the classes are defined in the class attribute, but instead where they appear in the css

.myClass1 {font-size:10pt;color:red}
.myClass2 {color:green;}

HTML

<div class="myClass2 myClass1">Text goes here</div>

The text in the div will appear green and not red because myClass2 is futher down in the CSS definition than my class1. If I were to swap the ordering of the class names in the class attribute, nothing would change.

这篇关于如何指定CSS类的顺序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆