CSS子元素选择父元素的示例分析-创新互联
这篇“CSS子元素选择父元素的示例分析”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“CSS子元素选择父元素的示例分析”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:申请域名、网站空间、营销软件、网站建设、昂仁网站维护、网站推广。通常一个CSS选择器都是从上往下选择的,通过父元素选择子元素,那么能不能通过子元素选择父元素呢?
如果我想选择包含 a.active 的 li 该怎么实现呢? 目前我们学到的CSS好像是没有办法的,不过今天要将的一个CSS伪类 :has() 就有这个功能,虽然还处于草案阶段,但是还是可以提前了解一下。
li:has(> a.active){ color:red; }
除了表示包含,:has 还可以表示兄弟跟随关系
div:has(+ p){ color:red; }
表示选择
标签,前提是这个div标签必须是被一个
名称栏目:CSS子元素选择父元素的示例分析-创新互联
转载来于:http://scyanting.com/article/ddsjde.html
紧跟着的。此外还可以与:not 一起使用
article:not(:has(a)){ color:red; }
表示不包含 的
article:has(:not(a)){ color:red; }
表示包含非 的
其实我们前面讲过的 :focus-within 也是一个通过子元素选择父元素的伪类,只不过条件只能是子元素是否获取焦点, 而 :has 则更灵活和强大。
form:focus-within{ background-color:black; }
如果通过 :has 实现的话, 可以这样写
form:has(:focus){ background-color:black; }
以上是“CSS子元素选择父元素的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
名称栏目:CSS子元素选择父元素的示例分析-创新互联
转载来于:http://scyanting.com/article/ddsjde.html