問題描述
我完全不知道如何使用更高級的 css 選擇器，例如 + 或 >但是由于我現在需要它來防止過多的 JS，也許有人可以幫助我解決這個塊的這種特殊情況:
I am not at all getting how to use more advanced css-selectors like + or > But as I am now needing it to prevent too much JS, maybe someone can help me out with this particular situation of this block:
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
我想這樣做:
.rf_re1-suche_container input:focus{
background:orange;
}
但也適用于按鈕.所以:如果輸入有焦點，我希望輸入和按鈕具有相同的背景.我該怎么做?謝謝！
but also for the button. So: If the input has a focus I want the input AND the button to have the same background. How would I do that? Thanks!
推薦答案
您需要分別定位輸入和按鈕.因為您希望這僅在輸入具有焦點時應用，所以您需要重復整個選擇器，包括 input:focus 部分，然后使用 + 組合器鏈接焦點輸入的按鈕:
You will need to target the input and the button separately. Because you want this to apply only when the input has focus, you will need to repeat the entire selector including the input:focus portion, then use a + combinator to link the button to the focused input:
.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>這篇關于多個元素的 CSS 選擇器的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！