本文将探讨如何使用 CSS 和 JavaScript 来解决一个常见的样式问题：如何选择性地为 标签应用样式，但排除那些包含特定子元素（例如 标签）的 标签。
问题描述
我们需要为所有的 标签应用默认样式，但是当 标签包含 子元素时，不应用这些默认样式。直接使用 CSS 选择器可能会遇到困难，因为 CSS 本身并没有直接选择父元素的能力。
JavaScript 解决方案
以下 JavaScript 代码可以实现所需的效果：
for (x of document.getElementsByTagName("a")) { if (x.children[0] != undefined) { if (x.children[0].tagName=="SPAN" || x.children[0].tagName=="span") { x.style.color="unset"; } }}
代码解释：
立即学习“前端免费学习笔记（深入）”；
document.getElementsByTagName(“a”): 获取页面中所有的 标签，返回一个 HTMLCollection 对象。for (x of …): 使用 for…of 循环遍历 HTMLCollection 中的每一个 标签。x.children[0] != undefined: 检查当前 标签是否存在第一个子元素。如果不存在，则说明该 标签没有子元素，跳过后续判断。x.children[0].tagName==”SPAN” || x.children[0].tagName==”span”: 如果存在第一个子元素，则判断该子元素的标签名是否为 “SPAN” (不区分大小写)。x.style.color=”unset”: 如果子元素的标签名为 “SPAN”，则将该 标签的 color 样式属性设置为 unset，从而移除默认的红色样式。 unset会将属性重置为其继承的值（如果该属性自然地从其父继承）或其初始值（如果不是）。
使用方法：
将上述 JavaScript 代码嵌入到 HTML 页面的 标签中，或者将其放入外部 JavaScript 文件中，并在 HTML 页面中引用该文件。建议将代码放置在
以上就是CSS 选择器：排除包含特定子元素的父元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573387.html
微信扫一扫 
支付宝扫一扫 
