:focus-within
åºçº¿
广æ³å¯ç¨
èª 2020å¹´1æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
:focus-within CSS 伪类表示å½å
ç´ æå
¶ä»»æå代å
ç´ è¢«èç¦æ¶ï¼å°å¹é
该å
ç´ ãæ¢è¨ä¹ï¼å®è¡¨ç¤º :focus 伪类å¹é
å°è¯¥å
ç´ èªèº«æå®çå代æ¶ï¼è¯¥ä¼ªç±»çæãï¼è¿ä¹å
æ¬ shadow æ ä¸çå代å
ç´ ãï¼
å°è¯ä¸ä¸
label {
display: block;
margin-top: 1em;
}
label:focus-within {
font-weight: bold;
}
<form>
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
</form>
è¿ä¸ªéæ©å¨é常æç¨ï¼ä¸¾ä¸ªå¸¸è§çä¾åï¼å½ç¨æ·èç¦äºä¸ä¸ª <input> åæ®µæ¶ï¼å¯ä»¥ç¨å®æ¥çªåºæ¾ç¤ºæ´ä¸ª <form> 容å¨ã
è¯æ³
css
:focus-within {
/* ... */
}
示ä¾
æ¤ä¾åä¸ï¼å½è¡¨åæä¸ªææ¬è¾å ¥æ¡è·å¾ç¦ç¹åï¼è¡¨åä¼è¢«è®¾ç½®é¢è²æ ·å¼ã
HTML
html
<p>è¯è¯å¨è¿ä¸ªè¡¨åä¸è¾å
¥ç¹ä»ä¹ã</p>
<form>
<label for="given_name">ç»å®åç§°ï¼</label>
<input id="given_name" type="text" />
<br />
<label for="family_name">å®¶åºåç§°ï¼</label>
<input id="family_name" type="text" />
</form>
CSS
css
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 4px;
}
ç»æ
è§è
| è§è |
|---|
| Selectors Level 4> # the-focus-within-pseudo> |