html - 在不同类型的按钮之间切换

Question

所以我用codepen在我的主页上实现了按钮here .按钮可以用，但现在问题是右边的ToDo(+)按钮，加一个后出现的ToDo(x)按钮也有效果按钮 ToDo(+)。具体来说，悬停在它们上方有两条平行线从两端摆动。我如何将它们彼此分开，这样一个就不会影响另一个？具体的css代码在这里:

button{
  background:#00000088;
  color:#fff;
  border:none;
  position:relative;
  height:40px;
  font-size:1.2em;
  padding:0 1em;
  cursor:pointer;
  margin: 0 0.25em;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#ffffff;
  color:#000;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:3px;
  width:0;
  background: #bd818d;
  transition:400ms ease all;
}
button:after{
  right: inherit;
  top: 47px;
  left: -5px;
  bottom: 0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

Answer 1

这就是问题所在:

button{ /* YourStyle */}

这告诉您的浏览器它必须在它看到按钮元素的所有地方应用 YourStyle。而您的浏览器将保持忠诚并服从您的指示。要解决这个问题，您必须给 button 定义它的名称。

例子:

<button class='todo add'></button>
<button class='todo close'></button>

用 CSS 引用这些按钮:

/* When you want to reference all buttons */
button{} or .todo{}

/* When you wish to target the todo add only */
.todo.add{} or .add{}

/* When you wish to target the todo close only */
.todo.close{} or .close{}

尝试为您的按钮提供类名或 ID，并从 css 样式中引用它们。