jquery - 系统地为每个 A 添加不同的 CSS 边框,即使它们在子 div 中
问题描述
我有一个困境。我有一个菜单,其结构如下:
<ul class="main-menu">
<li class="menu-item" <a href="">Menu item 1</a>
</li>
<ul class="sub-menu">
<li class="menu-item"><a href="">Submenu item 1</a></li>
<li class="menu-item has-children"><a href="">Submenu item 2</a></li>
<ul class="sub-menu">
<li class="menu-item"><a href="">Sub-sub menu item 1</a></li>
<li class="menu-item"><a href="">Sub-sub menu item 2</a></li>
</ul>
<li class="menu-item"><a href="">Submenu 3</a></li>
<li class="menu-item has-children"><a href="">Submenu 4</a></li>
<ul class="sub-menu">
<li class="menu-item"><a href="">Sub-sub menu item 3</a></li>
<li class="menu-item"><a href="">Sub-sub menu item 4</a></li>
</ul>
</ul>
<li class="menu-item" <a href="">Menu item 2</a>
</li>
</ul>
我需要系统地为列表中的每个“a”标签分配一个新的边框颜色,以创建彩虹边框效果(所以第一个找到的“A”(菜单项 1)有蓝色边框,第二个“a”(子菜单项 1)有红色,第三个(子子菜单项 1)有粉红色,第四个(子子菜单项 2)有绿色等)。
问题是,因为子菜单里面有子菜单,我不能使用 :nth-child psuedo,因为它不包括孩子。像这样的例子:
ul li a:nth-child(1) {
border: 1px solid blue;
}
ul li a:nth-child(2) {
border: 1px solid pink;
}
有没有办法系统地遍历主菜单类中的每个“a”,并为每个项目添加不同的 css?在未来的证明方式中,如果菜单发生变化(例如添加了第二个顶级菜单项,或者添加了额外的子菜单项),那么颜色仍然遵循相同的顺序吗?
理想情况下通过 CSS,但也对 jQuery 想法开放!
解决方案
如果我们考虑到每个链接总是有一行,并且每行将包含一个链接并且行的高度是已知的(或者我们可以修复它),那么这是一个仅 CSS 的想法:
ul.main-menu {
--l:1.5em; /* our line-height */
line-height:var(--l);
position:relative; /* relative to main element */
z-index:0;
}
ul.main-menu a {
clip-path:inset(0); /* clip everything outside the link */
color:#fff;
padding:0 5px;
display:inline-block;
}
ul.main-menu a::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
/* your color array below */
background:
repeating-linear-gradient(0deg,
red 0 calc(1*var(--l)),
green 0 calc(2*var(--l)),
blue 0 calc(3*var(--l)),
purple 0 calc(4*var(--l)),
pink 0 calc(5*var(--l)));
}
<ul class="main-menu">
<li class="menu-item"> <a href="">Menu item 1</a></li>
<li>
<ul class="sub-menu">
<li class="menu-item"><a href="">Submenu item 1</a></li>
<li class="menu-item has-children"><a href="">Submenu item 2</a></li>
<li>
<ul class="sub-menu">
<li class="menu-item"><a href="">Sub-sub menu item 1</a></li>
<li class="menu-item"><a href="">Sub-sub menu item 2</a></li>
</ul>
</li>
<li class="menu-item"><a href="">Submenu 3</a></li>
<li class="menu-item has-children"><a href="">Submenu 4</a></li>
<li>
<ul class="sub-menu">
<li class="menu-item"><a href="">Sub-sub menu item 3</a></li>
<li class="menu-item"><a href="">Sub-sub menu item 4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item"> <a href="">Menu item 2</a></li>
</ul>
要拥有边框,我们需要一个额外的包装器:
ul.main-menu {
--l:1.5em; /* our line-height */
line-height:var(--l);
position:relative;
z-index:0;
}
ul.main-menu a {
clip-path:inset(0);
display:inline-block;
}
ul.main-menu a > span {
display:block;
padding:0 4px;
background:linear-gradient(#fff 0 0) center/calc(100% - 6px) calc(100% - 6px) no-repeat;
}
ul.main-menu a::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:
repeating-linear-gradient(0deg,
red 0 calc(1*var(--l)),
green 0 calc(2*var(--l)),
blue 0 calc(3*var(--l)),
purple 0 calc(4*var(--l)),
pink 0 calc(5*var(--l)));
}
<ul class="main-menu">
<li class="menu-item"> <a href=""><span>Menu item 1</span></a></li>
<li>
<ul class="sub-menu">
<li class="menu-item"><a href=""><span>Submenu item 1</span></a></li>
<li class="menu-item has-children"><a href=""><span>Submenu item 2</span></a></li>
<li>
<ul class="sub-menu">
<li class="menu-item"><a href=""><span>Sub-sub menu item 1</span></a></li>
<li class="menu-item"><a href=""><span>Sub-sub menu item 2</span></a></li>
</ul>
</li>
<li class="menu-item"><a href=""><span>Submenu 3</span></a></li>
<li class="menu-item has-children"><a href=""><span>Submenu 4</span></a></li>
<li>
<ul class="sub-menu">
<li class="menu-item"><a href=""><span>Sub-sub menu item 3</span></a></li>
<li class="menu-item"><a href=""><span>Sub-sub menu item 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item"> <a href=""><span>Menu item 2</span></a></li>
</ul>
当然,以上依赖于很多固定值,所以你可能需要为你的真实代码调整很多东西:
推荐阅读
- flutter - 更新持久存储失败 - Galaxy Tab S6/Linux
- python - Deepcopy 不会产生唯一的对象
- docusignapi - Go Live 的 DocuSign 包络校正和 DocuSign 限制(违规)
- java - 如何让程序在java中检查一个字母的实例?
- flutter - 如何在颤动中限制onLocationChanged
- karate - 有没有办法查看架构验证失败的地方?
- python - 如何在 anaconda 中添加共享库?
- node.js - 无服务器 & aws lambda & puppeteer & Node.js
- visual-studio-code - vscodevim:闲置一段时间后,
在命令行中返回“正常”模式或明文 - json - Jmeter Json Extractor:JSONPath 表达式适用于评估器,但不适用于 jmeter?