删除 CSS 声明会破坏块中的其他声明，但仅限于 Chrome 中的按钮

Question

我已将其缩小为以下 HTML，这会在 Chrome 中产生奇怪的效果：

   <style type="text/css">
      #btn1, .text1 {
        font-family: courier;
        font-size:   42px;
        background:  pink;  /* BUG?? Removing this line breaks btn1's font */
      }
      #btn2, .text2 {
        font-family: arial;
        font-size:   42px;
        background:  cyan;
      }
    </style>
 
    <input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
    <input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
    <input type='text' class='text1' value='Text1'> <p>
    <input type='text' class='text2' value='Text2'>

当删除包含 background: pink; 的声明行时，它会破坏 ID 为 btn1 的按钮的字体系列和字体大小，但带有 class 的输入 text1 很好，而且只在 Chrome 中（我只测试过 Chrome 和 Firefox）。

如果我将 classes 更改为 ID，反之亦然，这似乎并不重要；它总是失去其字体特征的按钮。此外， background: pink; 出现在块中的位置似乎没有什么区别；只要它在那里，字体似乎就符合预期。

Answer 1

根据您给定的样式，它工作正常。 font-size: 42 不会应用任何内容，因为它不是有效语法。它应该像 font-size:42px 和 #btn2 中的一样。之后，如果你 remove/add 背景，那不会改变任何样式。看看下面的代码片段（我没有应用 font-size:42px 和运行，因为它是你的代码）。

#btn1, .text1 {
        font-family: courier;
        font-size:   42;
        background:  pink;  /* BUG?? Removing this line breaks btn1's font */
      }
      #btn2, .text2 {
        font-family: arial;
        font-size:   42px;
        background:  cyan;
      }

<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
    <input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
    <input type='text' class='text1' value='Text1'> <p>
    <input type='text' class='text2' value='Text2'>

现在我将从您的代码中删除 background: pink。看看下面的片段。

#btn1, .text1 {
        font-family: courier;
        font-size:   42;        
      }
      #btn2, .text2 {
        font-family: arial;
        font-size:   42px;
        background:  cyan;
      }

<input type='button' id='btn1' onclick='alert("btn1")' value='Button1'> &nbsp;
    <input type='button' id='btn2' onclick='alert("btn2")' value='Button2'> <p>
    <input type='text' class='text1' value='Text1'> <p>
    <input type='text' class='text2' value='Text2'>

看看上面的片段。两个片段 button1 字体系列之间没有区别。这两个地方都只应用 courier 字体。只有背景变得不同，因为它正在为按钮应用默认样式。

现在告诉我们，您还有什么具体问题吗？？？

删除 CSS 声明会破坏块中的其他声明，但仅限于 Chrome 中的按钮

Removing CSS declaration breaks other declarations in block, but only for buttons in Chrome

css

button

chromium