Question

因此，我使用了一个Codepen在首页here中实现了按钮。这些按钮可以使用，但是问题出在右边的ToDo (+)按钮上，添加一个按钮后出现的ToDo (x)按钮也具有button 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。可以将包含通用样式的类名赋予两者，而特定的类名可以位于它们各自的类名中。

Answer 2

这是问题所在：

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样式中引用它们。

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

2 个答案: