为什么不应用内联样式定义

Question

我正在开发 google sheet 侧边栏。为此 link 到 google 侧边栏 css 包被使用。

bt1 有一个内联 style background-color 声明 important!.

但是当页面加载时颜色是灰色的。我翻阅了 google css 试图理解，但收效甚微。

bt2.onClick() - 更改 bt1.disable。您可以看到内联语句仅在禁用 bt1 时有效。如果不 linking 到 google css - 行为符合预期。

我的理解是内联样式必须始终获胜。特别是在指定 important!

时

我的问题是：

这个说法在 100% 的情况下是正确的吗？
如果不是 - 在什么情况下？
有办法克服吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">


</head>
<body>
    <button id="bt1" style="background-color: rgb(43, 226, 137) !important;">bt1</button>
    <button id="bt2" onclick="bt2OnClick()">bt2</button>

<script>
  function bt2OnClick(){
    let bt = document.getElementById("bt1");

    // Switch state
    bt.disabled = !bt.disabled;
  }
</script>
</body>
</html>

Answer 1

您的样式实际上正在应用，但是 add-ons1.css您添加的 background 属性和 linear-gradient 所以您的 background-color 不会改变background-image 属性表示梯度

所以如果你想覆盖它，只需 select background 属性而不是 background-color

而且你不再需要你 !important :)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">


</head>
<body>
    <button id="bt1" style="background: rgb(43, 226, 137)">bt1</button>
    <button id="bt2" onclick="bt2OnClick()">bt2</button>

<script>
  function bt2OnClick(){
    let bt = document.getElementById("bt1");

    // Switch state
    bt.disabled = !bt.disabled;
  }
</script>
</body>
</html>

为什么不应用内联样式定义

Why inline style definition is not applied

css

css-selectors