CSS 选择器：排除包含特定子元素的父元素-小浪学习网

CSS 选择器：排除包含特定子元素的父元素

本文将探讨如何使用 css 和 JavaScript 来解决一个常见的样式问题：如何选择性地为 <a> 标签应用样式，但排除那些包含特定子元素（例如 <span> 标签）的 <a> 标签。

问题描述

我们需要为所有的 <a> 标签应用默认样式，但是当 <a> 标签包含 <span> 子元素时，不应用这些默认样式。直接使用 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”): 获取页面中所有的 <a> 标签，返回一个 htmlCollection 对象。
for (x of …): 使用 for…of 循环遍历 HTMLCollection 中的每一个 <a> 标签。
x.children[0] != undefined: 检查当前 <a> 标签是否存在第一个子元素。如果不存在，则说明该 <a> 标签没有子元素，跳过后续判断。
x.children[0].tagName==”SPAN” || x.children[0].tagName==”span”: 如果存在第一个子元素，则判断该子元素的标签名是否为 “SPAN” (不区分大小写)。
x.style.color=”unset”: 如果子元素的标签名为 “SPAN”，则将该 <a> 标签的 color 样式属性设置为 unset，从而移除默认的红色样式。 unset会将属性重置为其继承的值（如果该属性自然地从其父继承）或其初始值（如果不是）。

使用方法：

将上述 JavaScript 代码嵌入到 HTML 页面的 <script> 标签中，或者将其放入外部 JavaScript 文件中，并在 HTML 页面中引用该文件。建议将代码放置在 </body> 标签之前，以确保在 dom 加载完成后执行。

示例：

<!DOCTYPE html> <html> <head>   <title>CSS Selector Example</title>   <style>     a {       color: red;     }      a span {       color: unset; /* 确保 span 标签的颜色不受影响 */     }   </style> </head> <body>    <a href="#">styled</a>   <br>   <a href="#"><span>not styled</span></a>    <script>     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";         }       }     }   </script>  </body> </html>

注意事项

性能： 如果页面中存在大量的 <a> 标签，频繁地操作 DOM 可能会影响性能。可以考虑使用事件委托等技术来优化性能。
兼容性： 该 JavaScript 代码在现代浏览器中都可以正常运行。如果需要兼容旧版本的浏览器，可能需要使用其他的 JavaScript 语法或 polyfill。
其他子元素： 如果需要排除包含其他特定子元素的 <a> 标签，只需要修改代码中的 tagName 判断条件即可。例如，排除包含 <img> 标签的 <a> 标签，可以将 x.children[0].tagName==”SPAN” || x.children[0].tagName==”span” 修改为 x.children[0].tagName==”IMG” || x.children[0].tagName==”img”。
更复杂的子元素结构: 如果需要检查更深层次的子元素，或者更复杂的子元素结构，需要相应地修改 JavaScript 代码。例如，可以使用递归函数来遍历所有的子元素。
样式覆盖: 如果默认样式是通过其他 CSS 规则定义的，可能需要使用 !important 来确保 unset 能够覆盖这些样式。