如何根据父元素的前一个兄弟元素的属性来选择元素？

问题描述 投票：0回答：1

有没有办法可以使用 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&amp;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&amp;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>

html css nested nested-attributes
1个回答
0
投票

您可以按照本页所述在 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&amp;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&amp;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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.