如何將多個選擇器與相鄰兄弟選擇器結合使用？

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。