這個問題在這里已經有了答案： 是否有“前一個兄弟”選擇器？ (26 個回答) “~”（波浪線/波浪線/旋轉）CSS 選擇器是什么意思？ (5 個回答) 7 小時前關閉。
這篇文章在7 小時前被編輯并提交審核。
我只想在沒有并且是（空字串）label時在 CSS中選擇inputfocusvalue''
.email label:not(input[value='']:not(input:focus) ~ label) {
color: green;
}<div class='email'>
<label for='email'>Email</label>
<input type='email' id='email' value={email} onChange={handleEmail} />
</div>uj5u.com熱心網友回復：
在 CSS 中選擇前一個同級只能使用:has()偽類，在撰寫本文時它僅受 Safari 支持
您當前的選擇器：
.email label:not(input[value='']:not(input:focus) ~ label)
有語法錯誤的括號，但如果我們修復它：
.email label:not(input[value='']):not(input:focus) ~ label
它選擇所有標簽之后的標簽不是帶有 的輸入value=''，也不是焦點輸入，它們都是帶有 class 的元素的后代.email。
以下是您將如何實作您想要的選擇器has()：
label:has( #email:not(input[value='']:not(input:focus)) {
color: green;
}<div className='email'>
<label htmlFor='email'>Email</label>
<input type='email' id='email' value={email} onChange={handleEmail} />
</div>這是一個你可能想要同時使用的 JavaScript polyfill 。
除此之外，您可以使用的一種可能對螢屏閱讀器等可能或可能不可怕的黑客攻擊是反轉標記并使用 CSS 將其重新排序：
#email:not(input[value='']):not(input:focus) label {
color: green;
}
.email {
width: fit-content;
display: flex;
flex-flow: row-reverse wrap;
}<div class='email'>
<input type='email' id='email' value={email} onChange={handleEmail} />
<label htmlFor='email'>Email</label>
</div>uj5u.com熱心網友回復：
你可以讓生活更輕松一些（因為:has目前支持不是很好）。首先，在Theninput 之前label放置，為了保留您的原始格式，將您的父emaildiv 宣告為flex容器并反轉其 flex 行方向。
CSS
.email {
display: inline-flex;
flex-direction: row-reverse;
column-gap: 0.35rem;
}
input[value=""]:not(:focus) label {
color: red;
}
JSX
<div className="email">
<input type="email" id="email" onChange={handleEmail} />
<label htmlFor="email"> Email </label>
</div>
代碼沙盒示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465721.html