如何将多个选择器与相邻兄弟选择器结合使用？

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; 
    } 

我想要做的是最后2个款式组合成一个单一的一个当输入是状态，将工作要么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），所以不能以这种方式组合它们。

Answer 2

您可以使用any对于这一点，如果你的目标浏览器支持：

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

此刻，你将需要供应商前缀为-webkit-any等最终，这将是标准化为:matches。见https://developer.mozilla.org/en-US/docs/Web/CSS/:any。