Question

我有一些用于制作按钮的css代码。我正在使用伪元素来创建我的按钮图标，并从精灵表中加载我的按钮。在我的例子中，我有3个按钮，但有时我还有更多。

如果你研究我的CSS，你可以看到每个伪元素之间唯一变化的是精灵位置。所以很多代码都在重复。

无论如何，我可以使用更少的代码，但做同样的事情吗？

.add_button,
.excel_button,
.history_button {
    color: #000;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 2px;
    border-radius: 5px;
    border: 2px solid #009900;
    height: 25px;
    width: 165px;
    margin-bottom: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
     position: relative; 
}
.add_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.excel_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -99px -50px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -125px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}

Answer 1

这样的事情？

.add_button::before, .excel_button::before, .history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0 0 no-repeat;
    float: left; 
    margin: -1px 10px 0 0;
}
.excel_button::before {
    background-position: -99px -50px;
}
.history_button::before {
    background-position: -125px 0;
}

Answer 2

您需要使用三个::before伪选择器，因为您有不同的图标。但是你可以通过这种方式进一步减少它：

.add_button::before,
.excel_button::before,
.history_button::before {
  content: "";
  width: 25px;
  height: 25px;
  background: url("../../images/buttons/buttons_25x25.png") 0px 0px no-repeat;
  float: left; 
  margin: -1px 10px 0px 0;
}
.add_button::before {
  background-position: 0px 0px;
}
.excel_button::before {
  background-position: -99px -50px;
}
.history_button::before {
  background-position: -125px 0px;
}

Answer 3

是！

您可以像这样重构代码：

/* put all of the "common" styles here */
.add_button::before,
.excel_button::before,
.history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    /* zero is unitless, so don't need px */
    background-position: 0 0;
    float: left; 
    margin: -1px 10px 0 0;
}

/* override only those styles that change here */
.excel_button::before {
    background-position: -99px -50px;
}

.history_button::before {
    background-position: -125px 0 no-repeat;
}

多个之前的陈述。有没有办法使用更少的代码来做同样的事情？

3 个答案: