如果我用 CSS 更改一个按钮，另一个也会更改答案

【问题标题】：If I change one button with CSS, the other is also changed如果我用 CSS 更改一个按钮，另一个也会更改
【发布时间】：2022-02-12 19:49:27
【问题描述】：

我在使用 css 编辑按钮时遇到问题。

我特别注意到，如果我修改了“取消更改”按钮，则存在于不同 div 中的“删除文章部分”按钮也会被修改。

有人可以帮我吗？

.button[type=submit],[type=button] {
    width: 30%;
    background-color: rgb(24, 73, 32);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type=submit]:hover {
    background-color: #45a049;
}

<div class = "button">
   <button type = "submit" class = "full"> Save changes </button>
   <input type = "button" value = "Cancel changes"
   onclick = "clearResult (document.getElementById ('id'). value)" />
</div>

<div class = "buttons">
   <form action = "creaFrammento.html">
       <input type = "submit" value = "Add article part" />
   </form>

   <input type = "button" value = "Delete article parts" onclick = "confirmation ()" />
</div>

【问题讨论】：

标签： html css

【解决方案1】：

那是因为您使用此属性[type=button] 定位任何元素。这针对“取消更改”按钮和“删除文章部分”。

要定位一个特定元素，您可以给它一个id，然后在您的CSS 中选择带有id 的元素。正如您在下面看到的，我已将“删除文章部分”指定为 id="delete-btn"，因此 CSS 定位 #delete-btn 将仅适用于它。

.button[type=submit],[type=button] {
    width: 30%;
    background-color: rgb(24, 73, 32);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#delete-btn:hover {
    background-color: #45a049;
}

<div class = "button">
   <button type = "submit" class = "full"> Save changes </button>
   <input type = "button" value = "Cancel changes" id="delete-btn" onclick = "clearResult (document.getElementById ('id'). value)" />
</div>
<div class = "buttons">
   <form action = "creaFrammento.html">
       <input type = "submit" value = "Add article part" />
   </form>
   <input type = "button" value = "Delete article parts" onclick = "confirmation ()" />
</div>

【讨论】：

【解决方案2】：

如果你使用 .button 它是一个元素选择器，这意味着 CSS 适用于 HTML 页面中的整个按钮。为了防止这种情况，您可以使用类选择器或 id 选择器。但是当我们使用 javaScript 时，我们需要这个 id 选择器，所以推荐使用类选择器。

【讨论】：