用於多個元素的CSS選擇器

Question

我完全不知道如何使用更高級的CSS選擇器，比如+或> 但是因爲我現在需要它來防止太多的JS，也許有人可以幫助我解決這個問題此塊的情況：

<section class="rf_re1-suche_container"> 
    <input type="search" placeholder="Your search"> 
    <button>Send</button> 
</section> 

和我想要做的是：

.rf_re1-suche_container input:focus{ 
    background:orange; 
} 

也爲按鈕。所以：如果輸入有焦點，我希望輸入和按鈕具有相同的背景。我會怎麼做？謝謝！

Answer 1

您需要分別定位輸入和按鈕。因爲你希望這僅適用於當輸入具有焦點時，您將需要重複整個選擇包括input:focus部分，然後用+組合子的按鈕鏈接到重點投入：

.rf_re1-suche_container input:focus, 
 
.rf_re1-suche_container input:focus + button { 
 
    background: orange; 
 
}

<section class="rf_re1-suche_container"> 
 
    <input type="search" placeholder="Your search"> 
 
    <button>Send</button> 
 
</section>

Answer 2

只需添加選擇器按鈕，用逗號分隔：

.rf_re1-suche_container input:focus, 
.rf_re1-suche_container input:focus ~ button { 
    background: orange; 
} 

代字號（~）是一般sibling selector。只有在兄弟之前的元素之前選擇元素。

這種方式與adjacent sibling selector非常相似，但對於後者來說，兩個元素需要彼此背道而馳。在你的情況下，它並不重要，因爲這兩個元素是父級中唯一的元素。