Question

我有一个名为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嵌套类，分组等等，并尝试了一些随机的东西，但似乎没什么用。

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

这样的东西

button.blue.small { height: 20px; }

只会在具有蓝色类和小类

的按钮上匹配

Answer 4

您可以使用一些类似

的类

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

然后你会做

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

css嵌套类，如何不重复代码？

4 个答案: