W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!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; } /* 选择包含选中 input 元素的 li 元素 */ ul li:has(input:checked) { border: 2px solid maroon; } </style> </head> <body> <h1>:has() 实例</h1> <p>请选择你最喜欢的 Web 语言：</p> <form action="/demo/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="提交"> </form> </body> </html>