javascript - 如何使用 CSS 选择类的 li
问题描述
var divs = document.querySelectorAll('li a.shadow'),
i;
for (i = 0; i < divs.length; ++i) {
divs[i].parentNode.style.backgroundColor = "red";
}
.breadcrumb {
margin: 20px;
list-style: none;
font: 15px Helvetica, Arial, Sans-Serif;
padding: 0;
display: flex;
}
.breadcrumb li {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white;
color: black !important;
text-decoration: none;
background: brown;
/* fallback color */
background: hsla(34, 85%, 35%, 1);
position: relative;
display: flex;
align-items: center;
}
.breadcrumb li:nth-child(2) {
background: rgb(221 221 221) !important;
border-left: 1px solid black !important;
}
.breadcrumb li:last-child {
background: rgb(221 221 221) !important;
border-right: 1px solid black !important;
}
.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:active {
color: #212121;
margin: 0 0px;
}
.breadcrumb li span::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 50%;
margin-top: -15px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li a::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 50%;
margin-top: -15px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
.breadcrumb li:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
position: relative;
left: 100%;
z-index: 2;
}
.breadcrumb li:last-child:before {
border-left: 0px solid hsla(34, 85%, 35%, 1) !important;
padding-left: 10px;
padding-right: 10px; }
.breadcrumb li:nth-child(8) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(8):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(7) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(7):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(6) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(6):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(5) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(5):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(4) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(4):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(3) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(3):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(2) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(2):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(1) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(1):before {
border-left-color: hsla(34, 85%, 85%, 1) !important;
}
.border{
width: 100%
}
<ul class="breadcrumb">
<li> <a href="" class="shadow">Link with shadow</a></li>
<li> <a href="" class="shadow">Link with shadow</a></li>
<li> <a href="">Link without shadow</a></li>
<li> <a href="">Link without shadow</a></li>
<li> <a href="" class="shadow">Link with shadow</a></li>
</ul>
如何选择具有名为 shadow 的类的任何 li 为背景红色
这是我尝试过的,但它不起作用
解决方案
在 CSS 中没有办法做到这一点,这是一个 JS 解决方案,通过使用querySelectorAll
类选择 li 内的所有锚点,shadow
然后循环遍历它们并将样式设置为 parent li
:
var divs = document.querySelectorAll('li a.shadow'),
i;
for (i = 0; i < divs.length; ++i) {
divs[i].parentNode.setAttribute('style', 'background-color: red !important');
}
.breadcrumb {
margin: 20px;
list-style: none;
font: 15px Helvetica, Arial, Sans-Serif;
padding: 0;
display: flex;
}
.breadcrumb li {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white;
color: black !important;
text-decoration: none;
background: brown;
/* fallback color */
background: hsla(34, 85%, 35%, 1);
position: relative;
display: flex;
align-items: center;
}
.breadcrumb li:nth-child(2) {
background: rgb(221 221 221) !important;
border-left: 1px solid black !important;
}
.breadcrumb li:last-child {
background: rgb(221 221 221) !important;
border-right: 1px solid black !important;
}
.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:active {
color: #212121;
margin: 0 0px;
}
.breadcrumb li span::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 50%;
margin-top: -15px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li a::before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 50%;
margin-top: -15px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
.breadcrumb li:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
position: relative;
left: 100%;
z-index: 2;
}
.breadcrumb li:last-child:before {
border-left: 0px solid hsla(34, 85%, 35%, 1) !important;
padding-left: 10px;
padding-right: 10px;
}
.breadcrumb li:nth-child(8) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(8):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(7) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(7):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(6) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(6):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(5) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(5):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(4) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(4):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(3) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(3):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(2) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(2):before {
border-left-color: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(1) {
background: rgb(221 221 221) !important;
}
.breadcrumb li:nth-child(1):before {
border-left-color: hsla(34, 85%, 85%, 1) !important;
}
.border {
width: 100%
}
<ul class="breadcrumb">
<li> <a href="" class="shadow">Link with shadow</a></li>
<li> <a href="" class="shadow">Link with shadow</a></li>
<li> <a href="">Link without shadow</a></li>
<li> <a href="">Link without shadow</a></li>
<li> <a href="" class="shadow">Link with shadow</a></li>
</ul>
推荐阅读
- php - 如何检查页面是否存在于 Restful API(即 PokeAPI)中?
- excel - VBA 条件格式数据栏“百分比/进度”
- wordpress - 如何在不接触 php 代码的情况下自定义 Word Press RSS 提要描述标签?
- r - lmer mixte 多级回归不适用于没有噪声的数据
- vba - 将粘贴列从工作表 1 复制到工作表 2,但需要连接
- c - 如何从 `void*` 类型发送指向数组中元素的指针?
- sql - SQL Where 子句:使用子句中 to 列之间的最大值
- ide - 开发 Solidity 的最佳 IDE / 插件
- angular - Angular 自定义组件 ngModel
- c# - 反向代理背后的 .Net Core 2.0 身份验证