css嵌套类,如何不重复代码?

时间:2011-09-19 01:21:42

标签: css

我有一个名为button.blue的css类:

button.blue { background-color: blue; ... }
button.blue:active { background-color: darkblue; ... }
button.blue:hover { background-color: lightblue; ... }

要使用它,我会执行以下操作:

<button class="blue">hello</button>

现在这允许我有一个蓝色按钮,上面有“hello”文本。我想要有各种不同尺寸的蓝色按钮。我不想重复代码。这样做的最佳方式是什么?

我试过谷歌搜索,但我的问题太模糊,我想我找到答案。我已经尝试过搜索CSS嵌套类,分组等等,并尝试了一些随机的东西,但似乎没什么用。

4 个答案:

答案 0 :(得分:2)

你只需要一个不同宽度的类,所以

.button_1 {width:100px;}
.button_2 {width:200px;}
.button_3 {width:300px;}
.button_4 {width:400px;}

等等。或者其他一些这样的命名系统。每个元素可以有多个类,所以这样可以正常工作。

<button class="blue button_1">hello</button>

答案 1 :(得分:0)

button.blue的所有属性都将由button.blue:active和button.blue:hover继承。您无需为要更改的属性重复接受代码接受。

答案 2 :(得分:0)

您可以在css中链接选择器。像

这样的东西
button.blue.small { height: 20px; }

只会在具有蓝色类和小类

的按钮上匹配

答案 3 :(得分:0)

您可以使用一些类似

的类
.big { width: 100px, height: 100px }
.small { width: 20px, height: 20px }

然后你会做

<button class="big blue">hello</button>