我怎么能用 CSS class 的 select li

Question

 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>

我怎样才能 select 任何具有 class 名为阴影的 li 是背景红色

这是我尝试过的，但它不起作用

Answer 1

在 CSS 中没有办法做到这一点，这是一个 JS 解决方案，使用querySelectorAll到 select li内的所有锚点，然后使用shadow将样式循环到父级

 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>

Answer 2

first, you can define .red-background that contains background-color in your CSS, after that you can iterate all HTML objects that have .shadow class name using js and add your .red .red-background class:

let elements_with_shadow_class = document.getElementsByClassName("shadow");

for(let element of elements_with_shadow_class){
   element.classList.add("red-background");
}