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