如何根据父元素的前一个同级元素的子元素的属性来选择元素？

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

有没有办法可以使用 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
2个回答
0
投票

以下是一些非常具体的解决方案，可能无法适应所有可能的菜单配置。

第一个选择不包含具有 

dropdown-toggle
类的子项的列表项元素，这些元素位于具有指定 
href
属性值的子项的列表项的后续同级中。

或者，以类似的方式进行选择，但使用 

nth-child
按列表项索引进行选择。

请注意，我选择的是 list items 而不是锚点，因为这才是真正应该隐藏的内容。空列表项可能看起来很难看，并且是一个可访问性问题。如果这是一个问题，您可以根据需要轻松添加 

> a
来指定锚点。

.nav > li:has([href*="isInternalUser=true"]) ~ li:not(:has(a.dropdown-toggle)) {
  color: orange;
}

.nav-alt > li:has([href*="isInternalUser=true"]) ~ li:nth-child(2),
.nav-alt > li:has([href*="isInternalUser=true"]) ~ li:nth-child(3) {
  color: magenta;
}
<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>
    </ul>
  </li>
</ul>

<hr>

<ul class="nav-alt 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>
    </ul>
  </li>
</ul>

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.