ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

:has 伪类选择器(“父选择器” 或 “反向选择器” )

:has 伪类选择器(“父选择器” 或 “反向选择器” )

CSS4引入了:has()伪类选择器,可以实现这样的需求。比如:

.parent:has(.child) { background: yellow; }
  • 这条语句会选中所有拥有.child子元素的.parent元素

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .parent:has(.child) { border: 2px solid red; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> <div class="parent"> <div>没有子类</div> </div> </body> </html>
返回列表