主页
CSS 参考手册
CSS :has() 伪类
trycss_sel_has3
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; padding: 0; margin: 0; } ul li { border: 1px solid gray; border-radius: 10px; padding: 10px; margin: 10px; } ul li input:checked { accent-color: maroon; } /* Select li elements that have checked input element inside */ ul li:has(input:checked) { border: 2px solid maroon; } </style> </head> <body> <h1>Demo of :has()</h1> <p>Please select your favorite Web language:</p> <form action="/action_page.php"> <ul> <li><input type="radio" id="html" name="fav_language" value="HTML"><label for="html">HTML</label></li> <li><input type="radio" id="css" name="fav_language" value="CSS"><label for="css">CSS</label></li> <li><input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label></li> </ul> <input type="submit" value="Submit"> </form> </body> </html>