Question

我问这个奇怪的问题，因为我的代码中遇到了CSS问题。

摘要

我有一个按钮，我用css造型。

.button-phone
{
    width: 15px;
    background: url('/img/icon_phone.png') no-repeat;
    font-size: 10.5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    width: 14px;
    height: 14px;
   *margin-right: .3em;
   line-height: 14px;
   vertical-align: text-top;
}

此处，宽度在单个样式代码中设置为15px和14px。

我的问题

我想知道分配宽度或任何其他属性两次是否有效？如果它有效，那么将应用哪一个？

在我的情况下，按钮设置为某个宽度，我不知道设置了哪个宽度。我怎么知道哪一套？

Answer 1

您最后指定的那个（在您的情况下，width:14px）被使用

Answer 2

在上面的例子中，规则将按照出现的顺序进行，因此将使用最后一个。但总的来说，这不是唯一的决定方式。

如果您将一个样式分配给一般元素，并且在其他地方使用包含不同值的更具体的选择器，则无论顺序如何，CSS都将使用更具体的选择器。

例如：

 div#mydiv {
   width: 300px;
 }

 div {
   width: 600px;
 }

此处，我们会使用id="mydiv"的div的宽度，因此会使用300px，从而覆盖后来但不太具体的600px规则。

特异性顺序的一般概念如下：

tag < class < id

因此，类会覆盖常规标记，而id会覆盖这些标记。

Answer 3

在此特定示例中，最后一个属性会覆盖先前定义的相同属性

无论如何，从一般观点来看，可能存在一些例外情况，例如

div {
    font-size: 12px;
    font-size: 1rem;
}

如果浏览器不理解font-size: 12px;单位值，则此处使用的属性为rem，因此在此示例中，应用的属性取决于特定的浏览器支持。如果第一个属性在规则内定义，并且特异性高于第二个属性，则会发生另一个例外。

Answer 4

Css代表级联样式表，这意味着您的浏览器将从上到下解释您的CSS。

您可以将宽度连续放置20次，仅使用最后一个版本，它将分配值，但每次遇到另一个width属性时，该值都将被覆盖。基本上，上次遇到width-property时，该值将用于页面的最终版本。

此外，根据您使用的浏览器，有一些方法可以找出应用的样式：

Chrome：按下F12并打开检查器（或者您可以右键单击页面并选择“检查元素”，它将跳转到您单击的元素）
IE：也按F12，将打开一个新窗口，您可以检查该页面上的HTML / CSS
Opera：右键单击页面并选择“inspect element”
Firefox：右键单击页面并选择“查看页面源”
Safari：右键单击页面并选择“查看源代码”

然后由你来导航到你想要了解更多的元素。

CSS：多次分配样式时会发生什么？

4 个答案: