0

我问这个奇怪的问题是因为我在代码中遇到了 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样式代码。

我的问题

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

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

4

4 回答 4

5

使用您最后分配的那个（在您的情况下，width:14px）

于 2013-04-29T09:57:24.403 回答
3

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

无论如何，从一般的角度来看，可能会有一些例外，例如

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

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

于 2013-04-29T10:02:46.320 回答
2

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

如果您将样式分配给通用元素，并且在其他地方使用了包含不同值的更具体的选择器，则 CSS 将采用更具体的选择器，而不管顺序如何。

例如：

 div#mydiv {
   width: 300px;
 }

 div {
   width: 600px;
 }

在这里，使用 div 的宽度id="mydiv"，因此300px用于它，覆盖后面但不太具体的600px规则。

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

tag < class < id

所以类会覆盖通用标签，而 id 会覆盖这些标签。

于 2013-04-29T10:02:11.460 回答
1

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

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

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

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

然后由您决定导航到您想了解更多的元素。

于 2013-04-29T10:02:09.407 回答