深夜问题个 css 样式重用问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

http://caniuse.com/

Less

http://lesscss.org

Cool Libraries

Bootstrap from Twitter

Jetstrap

这是一个创建于 3630 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如我想定制一个 button 用的时候只是透明度背景不一样怎么写才最好，现在最笨的办法是：
.button-allen {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 0.5;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}
.button-allen:hover {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 1;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}

一个 button 就这么多代码，用多个还不写死， google 了半天语法无奈不知道搜索什么，估计是关键词不对，貌似还有哥 sass 的，求助

5 条回复 2016-01-09 13:16:31 +08:00

wulongqiu

2016-01-09 00:56:50 +08:00

.button-allen, .button-allen:hover {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 0.5;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}
.button-allen:hover {
opacity: 1;
}
最简单的是这样， CSS 是后边覆盖前边的。
可以搜索： CSS 重用

mogita

2016-01-09 01:04:57 +08:00

@wulongqiu 是不是第一行的 .button-allen:hover 也可以去掉？

hxsf

2016-01-09 02:05:27 +08:00

难道不是这么写的咩。。。

```css
.button-allen {
background:url('{% static 'img/apple-touch-icon-114.png' %}') center;
opacity: 0.5;
width:35px;
height: 35px;
border-radius:80%;
background-size: cover;
zoom: 1;
}
.button-allen:hover {
opacity: 1;
}
```

SourceMan

2016-01-09 09:30:26 +08:00 via iPhone

呵呵

boyhailong

2016-01-09 13:16:31 +08:00

@wulongqiu 还是没有解决因为用了 pure 很蛋疼的 pureutton 麻烦点修改了下也能看但麻烦
还有一个问题 sidebar 的位置有点偏下不知道怎么调整
如下图
<img>src="

"</img>

看不到的话直接看主页吧 https://allenzhao.herokuapp.com/