CSS中的同一属性是否可以有2个不同的值？

Question

为了测试CSS而执行示例时，我尝试了以下操作：

将2个CSS值添加到同一属性即使用于单个选择器也不会生效。

p{
  color: green;
  font-family: verdana;
  font-style: italic;
  font-style: bold
}

截至上述代码对于使其成为斜体和粗体的文本没有生效

Answer 1

font-style: bold应为 font-weight:bold

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

Answer 2

您可以编写CSS规则并重复属性声明。

但是，实际使用的值是列出的最后一个值。

例如：

p {
    color: green;
    color: red;
}

在此示例中，p可以使用颜色red，因为第二行会覆盖之前的属性声明。

参考：相关的CSS规范称为级联顺序：

http://www.w3.org/TR/CSS2/cascade.html#cascade

Answer 3

不，元素的属性始终只有一个值，尽管值本身可以包含多个部分，如font-family: verdana, sans-serif，其中verdana, sans-serif是单个值。

如果CSS规则包含多个具有相同属性名称的声明，则最后一个获胜，如@ MarcAudet的回答中所述。

CSS声明没有累积效果，因为您可以在规则中设置foo: bar然后foo: abc，期望这会产生一个以某种方式组合bar的值和abc。对于某些属性，可能需要这样的累积，但这是不可能的。

正如@Paulie_D所解释的那样，你的实际错误是使用了错误的属性名称。您需要使用正确的字体属性名称，例如font-weight来表示粗体，或者使用font shorthand property：

p {
  color: green;
  font: bold italic 100% verdana;
}

在此方法中，您无需记住组件属性的名称。另一方面，您需要遵循值的顺序（以及所需的值）的规则，并且它们并不是非常简单。