有没有办法可以使用 CSS 隐藏 li 元素内的第二个和第三个锚元素?此外,它需要根据第一个锚元素中的属性选择器“isInternalUser=true”隐藏。我知道它可以使用 JavaScript 来实现,但我在那里使用的框架仅支持 CSS,因此想知道是否可以使用属性选择器隐藏它的第二个和第三个元素。
.nav>li>[href*="isInternalUser=true"]+a,
.nav>li>[href*="isInternalUser=true"]+a+a {
display: none;
}
<ul class="nav nav-pills">
<li><a href="https://www.sapsfdemojobs.com/?isInternalUser=true" title="Home Page">Home Page</a></li>
<li><a href="https://www.sapsfdemojobs.com/careers" title="CMC Careers" target="_blank">CMC Careers</a></li>
<li><a href="https://www.sapsfdemojobs.com/home" title="Veterans" target="_blank">Veterans</a></li>
<li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" title="Find a Job" aria-controls="header1top3"> Find a Job <b class="caret"></b> </a>
<ul class="dropdown-menu company-dropdown headerdropdown" id="header1top3">
<li><a title="View All Jobs">View All Jobs</a></li>
<li><a href="https://sapsfdemojobs.com/content/CMC-Steel-Arizona-2nd-Micro-Mill/?locale=en_US&isInternalUser=true" title="Opportunities in Arizona">Opportunities in Arizona</a></li>
<li><a title="Business Support Jobs">Business Support</a></li>
<li><a href="https://sapsfdemojobs.com/content/Core-Career-Path/?locale=en_US&isInternalUser=true" title="Core Career Path">Core Career Path</a></li>
<li><a title="Drivers Jobs">Drivers</a></li>
<li><a title="Maintenance Jobs">Maintenance</a></li>
<li><a title="Operations Jobs">Operations</a></li>
<li><a title="Sales Jobs">Sales</a></li>
<li><a title="Students">Sudents </a></li>
<li><a title="Technology Jobs">Technology</a></li>
</ul>
</li>
</ul>
您可以按照本页所述在 css 中使用属性选择器:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
您的选择器
.nav > li > [href*="isInternalUser=true"] + a,
.nav > li > [href*="isInternalUser=true"] + a + a {
display: none;
}
是错误的,因为 href 属性位于“a”标签上,而您放在这里的“+ a”做了不同的事情。
li:has(>a[href="https://www.sapsfdemojobs.com/careers"]),
li:has(>a[href="https://www.sapsfdemojobs.com/home"]),
li:has(>a[href*="isInternalUser=true"]) {
display: none
}
<html>
<head>
</head>
<body>
<ul class="nav nav-pills">
<li><a href="https://www.sapsfdemojobs.com/?isInternalUser=true" title="Home Page">Home Page</a></li>
<li><a href="https://www.sapsfdemojobs.com/careers" title="CMC Careers" target="_blank">CMC Careers</a></li>
<li><a href="https://www.sapsfdemojobs.com/home" title="Veterans" target="_blank">Veterans</a></li>
<li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" title="Find a Job" aria-controls="header1top3"> Find a Job <b class="caret"></b> </a>
<ul class="dropdown-menu company-dropdown headerdropdown" id="header1top3">
<li><a title="View All Jobs">View All Jobs</a></li>
<li><a href="https://sapsfdemojobs.com/content/CMC-Steel-Arizona-2nd-Micro-Mill/?locale=en_US&isInternalUser=true" title="Opportunities in Arizona">Opportunities in Arizona</a></li>
<li><a title="Business Support Jobs">Business Support</a></li>
<li><a href="https://sapsfdemojobs.com/content/Core-Career-Path/?locale=en_US&isInternalUser=true" title="Core Career Path">Core Career Path</a></li>
<li><a title="Drivers Jobs">Drivers</a></li>
<li><a title="Maintenance Jobs">Maintenance</a></li>
<li><a title="Operations Jobs">Operations</a></li>
<li><a title="Sales Jobs">Sales</a></li>
<li><a title="Students">Sudents </a></li>
<li><a title="Technology Jobs">Technology</a></li>
</ul>
</li>
</ul>
</body>
</html>