时间戳

首页 > 解决方案 > 为什么不应用内联样式定义

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

问题描述

我正在开发谷歌表格侧栏。对于该链接到谷歌侧栏 css 包被使用。

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

但是，当页面加载时，颜色是灰色的。我浏览了google css试图理解，但没有多大成功。

bt2.onClick()- 改变bt1.disable。您可以看到内联语句只有在禁用 bt1 时才有效。如果没有链接到 google css - 行为符合预期。

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

我的问题是：

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

<!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>

标签： csscss-selectors

解决方案

您的样式实际上正在应用，但是add-ons1.css您添加的background属性带有 alinear-gradient所以您background-color不会更改background-image表示渐变的属性

所以如果你想覆盖它，只需选择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>

推荐阅读