css - 如何将多个选择器与相邻兄弟选择器组合？

Question

所以我有以下样式组合，可以按我的意愿工作。如果按钮处于 focus 或 active 状态，则按钮的 visibility: visible;

  .new-comment-button {
    margin: 0.25em 0 0.5em 0;
    float: right;
    visibility: hidden;
  }

  .new-comment-input:focus + .new-comment-button, 
  .new-comment-button:focus {
    visibility: visible;
  }

 .new-comment-input:active + .new-comment-button,
  .new-comment-button:active {
    visibility: visible;
  }

我想做的是将最后两种样式组合成一个，当输入处于 active 或 focus 状态时可以使用。但是，我尝试的每个组合都失败了，例如:

  .new-comment-input:focus + .new-comment-button,
  .new-comment-input:active + .new-comment-button, 
  .new-comment-button:focus {
    visibility: visible;
  }

我也试过:

  .new-comment-input:focus:active + .new-comment-button,
  .new-comment-button:focus {
    visibility: visible;
  }

都没用。我可以坚持使用单独的样式，但我很好奇是否有一种方法可以将它们正确组合并考虑 input 的两种状态？

Answer 1

你唯一能做的就是删除无关的 { visibility: visible; } 并将其替换为逗号:

.new-comment-input:focus + .new-comment-button, 
.new-comment-button:focus,
.new-comment-input:active + .new-comment-button,
.new-comment-button:active {
  visibility: visible;
}

您有四个选择器，分为两个规则集，但您不能将它们中的任何一个组合起来，因此您必须简单地将它们的两组合并为一个。 :focus:active 表示同时存在这两种状态 (AND)，而不是其中任何一种 (OR)，因此您不能以这种方式组合它们。