在一个css规则越少越好的游戏中，我认为另一个策略是在button和button:hover上有两个规则，只有一个额外的规则可以设置#last-btn的风格，只有在:hover上没有按钮的情况下。

* {
  margin: 0;
  padding: 0;
}

button {
  margin: 0.3rem;
  text-align: center;
  border: none;
  font-size: 1.2rem;
  padding: 1rem;
  border-radius: 15px;
  background-color: transparent;
}

button:hover,
button:not(:hover)+#last-btn{
  background-color: black;
  color: white;
}

个字符

我想最好不用define来完成，这是第一个或最后一个。代码更少，灵活性更高。
对于活动类，您可以标记活动类。
我知道你搜索较少的代码，但与按钮，我猜这是最短的没有改变你的风格部分。

* {
  margin: 0;
  padding: 0
}

button {
  margin: 0.3rem;
  text-align: center;
  border: none;
  font-size: 1.2rem;
  padding: 1rem;
  border-radius: 15px;
  background-color: transparent
}

button:hover+button {
  background-color: transparent;
  color: black
}

button:hover, .active {
  background-color: black;
  color: white
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />

<button><i class="fa fa-list"></i></button>
<button class="active"><i class="fa-solid fa-grip-vertical"></i>

作为一个相对的新手，我会尽可能的保持简单，如果你有不同的按钮做不同的事情，那么你确实需要把它们分开。
我只需要#first-button {background-color：绿色;} #第一个按钮：悬停{背景色：蓝色;}

最后一个按钮{背景色：yellow;} #最后一个按钮：悬停{背景色：红色

我是一个新手，但我认为输入更多，只是分开的东西，使它更清楚，更容易发挥周围的单一元素单独。
当然，如果你能合并，那么我会。
其他建议：我发现：悬停并不真正工作在触摸屏上，无论如何，可能不是在Safari（？），所以如果你想发生其他事情时，人点击按钮太多，你需要包括#第一个按钮：活动以及：悬停它做任何事情。
这是我的第一个答案，所以希望它是确定的。

我开始了：

button{
    margin: 0.3rem;
    text-align:center;
    border: none;   
    font-size: 1.2rem; 
    padding: 1rem;
    border-radius: 15px;
    background-color: white;
    color: black;
    /* Just a few nice things */
    cursor: pointer; 
    transition: all .3s ease-in-out;
}
.button-holder button:hover{
    background-color: black;
    color: white;  
}
.button-holder #first-btn:hover + #last-btn{
    background-color: white;
    color: black;
}
#last-btn{
    background-color: black;
    color: white;  
}

<div class="button-holder">
  <button id="first-btn">Button 1</button>
  <button id="last-btn">Button 2</button>
 </div>

你的问题不够清楚，但让我们试着帮忙吧。
我认为你的问题是如何缩短你的代码，而不是如何完成其他事情，
所以我们可以合并一些选择器继续。

* {
      margin: 0;
      padding: 0;
    }

    button {
      margin: 0.3rem;
      text-align: center;
      border: none;
      font-size: 1.2rem;
      padding: 1rem;
      border-radius: 15px;
      background-color: transparent;
    }

    #last-btn, #first-btn:hover {
      background-color: black;
      color: white;
    }

    #first-btn:hover+#last-btn {
      background-color: transparent;
      color: black;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />

<button id="first-btn"><i class="fa fa-list"></i></button>
<button id="last-btn"><i class="fa-solid fa-grip-vertical"></i></button>

这里我只是说first-btn和last-btn的悬停状态是相同的风格，然后我说当我悬停在最后一个按钮上时，让我们再次设置第一个按钮。
我觉得这就是你想要的。