Question

我是CSS的新手，到目前为止我一直在寻找方法。我正在创建这些按钮，如阴影和东西的链接。现在网站上有几个这样的按钮 - 关于按钮的一切都是相同的 - 除了一些属性改变像宽度和字体大小。

现在不是为每个按钮反复复制相同的代码 - 而是扩展按钮并只添加更改的属性。

两个按钮的示例 - css

.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}


.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}

这就是我目前在我的html

中使用它的方式

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

所以我想知道是否有更简洁的方法 - 比如

.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}

AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}

.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

但我不知道该怎么做。感谢您的意见

Answer 1

你可以为一个元素添加多个类，所以有一个.button类覆盖所有内容，然后是.button-submit类，它会添加内容。

例如：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}

查看实时jsFiddle here

在您的情况下，以下内容应该有效：

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}

查看实时jsFiddle here

Answer 2

你可能想试试这个：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button.submit {
    background-color: green;
}
.button.submit:hover {
    background-color: #ffff00;
}

这样你就可以避免重复这个单词，并且可以使用这样的元素中的类：

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

请参阅JSFiddle中的示例（http://goo.gl/6HwroM）

Answer 3

而不是重复常见的“向元素添加按钮类”的答案，我将向您展示新时代CSS的奇怪和笨拙世界中的新事物，或者更好地称为SCSS！

可以使用称为“Mixin”的东西来实现样式表中代码的重用。这允许我们做的是使用'@include'属性重用某些样式。

让我举个例子。

@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}

然后每当我们有一个按钮时我们说

#unique-button {
    @include button(#333);
    ...(additional styles)
}

在此处阅读更多内容：http://sass-lang.com/tutorial.html。

传播这个词!!!

Answer 4

您可以这样做，因为您可以将多个类应用于元素。创建您的主类和其他较小的类，然后根据需要应用它们。例如：

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

这将应用按钮并提交您将创建的类，同时允许您单独应用这些类。

修改代码示例：

.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

并应用如下：

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>

Answer 5

你可能想看看Sass。使用Sass，您基本上可以在css文件中创建变量，然后一遍又一遍地重复使用它们。 http://sass-lang.com/ 以下示例取自Sass官方网站：

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Answer 6

.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}

Answer 7

为公共部分的两个链接添加一个按钮类

.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}

在其他课程中保留不常见的规则。

您的HTML将是

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a>
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>

Answer 8

在不更改/添加新类的情况下，您可以为类名以“询问按钮”开头的所有元素添加样式......（无论类的元素是什么；按钮、锚点、div 等）让我们说你的按钮是 div 然后：

 div[class^="ask-button"] {
   // common css properties
 }

您还可以列出所有具有公共属性的类，如下所示：

.ask-button-display,
.ask-button-submit {
   // common css properties here
}

然后为每个按钮添加单独的样式：

.ask-button-display{
    // properties only for this button
    }

.ask-button-submit {
   // properties only for this button
}

CSS - 扩展类属性

8 个答案: