从css选择器中删除菜单链接

Question

我试着给所有的链接下划线，除了导航栏上的那些链接：

a:not(#site-navigation){
    text-decoration: underline;
}

但它不起作用。即使使用:not()，菜单链接也会保留下划线

我的菜单HTML如下：

<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="container nav-bar">
<div class="flex-row">
<div class="module left site-title-container">
<a href="https://goprune.com/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6" class="custom-logo-link" rel="home" itemprop="url" title="Shift-click to edit this element."><span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-custom_logo"><button aria-label="Click to edit this element." title="Click to edit this element." class="customize-partial-edit-shortcut-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"></path></svg></button></span><img width="270" height="110" src="https://goprune.com/wp-content/uploads/2020/09/cropped-go-prune-website-logo-3.png" class="custom-logo logo" alt="go prune" loading="lazy" itemprop="logo" srcset="https://goprune.com/wp-content/uploads/2020/09/cropped-go-prune-website-logo-3.png 270w, https://goprune.com/wp-content/uploads/2020/09/cropped-go-prune-website-logo-3-228x93.png 228w" sizes="(max-width: 270px) 100vw, 270px"></a> </div>
<button class="module widget-handle mobile-toggle right visible-sm visible-xs">
<i class="fa fa-bars"></i>
</button>
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse"><ul id="menu" class="menu"><li id="menu-item-961" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-927 current_page_item menu-item-961 active"><a title="Start Here" href="https://goprune.com/start-here/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Start Here</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a title="About" href="https://goprune.com/about/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">About</a></li>
<li id="menu-item-601" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-601 dropdown"><a title="Our Journey" href="#">Our Journey </a><span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-602"><a title="Results" href="https://goprune.com/results/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Results</a></li>
</ul>
</li>
<li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388"><a title="Blog" href="https://goprune.com/blog/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Blog</a></li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a title="Feedback" href="https://goprune.com/feedback/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Feedback</a></li>
</ul></div> </div>

<div class="module widget-handle search-widget-handle hidden-xs hidden-sm">
<button class="search">
<i class="fa fa-search"></i>
<span class="title">Site Search</span>
</button>
<div class="function">
<form role="search" method="get" id="searchform" class="search-form" action="https://goprune.com/" target="_self"><input type="hidden" name="customize_messenger_channel" value="preview-6"><input type="hidden" name="customize_autosaved" value="on"><input type="hidden" name="customize_changeset_uuid" value="20530401-cb14-4cf8-8038-f57a1cf41377">
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" placeholder="Type Here" value="" name="s" id="s">
<button type="submit" class="searchsubmit"><i class="fa fa-search" aria-hidden="true"></i><span class="screen-reader-text">Search</span></button>
</form> </div>
</div>
</div>

</div>
</div>
</nav>

Answer 1

您所需要的是正确的selector。#site-navigation a将选择id为site-navigation的元素的所有后代锚标签

#site-navigation a {
  text-decoration: none;
}

​

#site-navigation a {
  text-decoration: none;
}

<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="container nav-bar">
    <div class="flex-row">
      <div class="module left site-title-container">
        <a href="https://goprune.com/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6" class="custom-logo-link" rel="home" itemprop="url" title="Shift-click to edit this element."><span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-custom_logo"><button aria-label="Click to edit this element." title="Click to edit this element." class="customize-partial-edit-shortcut-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"></path></svg></button></span>
          <img width="270" height="110" src="https://goprune.com/wp-content/uploads/2020/09/cropped-go-prune-website-logo-3.png" class="custom-logo logo" alt="go prune" loading="lazy" itemprop="logo" srcset="https://goprune.com/wp-content/uploads/2020/09/cropped-go-prune-website-logo-3.png 270w, https://goprune.com/wp-content/uploads/2020/09/cropped-go-prune-website-logo-3-228x93.png 228w"
            sizes="(max-width: 270px) 100vw, 270px"></a>
      </div>
      <button class="module widget-handle mobile-toggle right visible-sm visible-xs">
<i class="fa fa-bars"></i>
</button>
      <div class="module-group right">
        <div class="module left">
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="menu" class="menu">
              <li id="menu-item-961" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-927 current_page_item menu-item-961 active"><a title="Start Here" href="https://goprune.com/start-here/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Start Here</a></li>
              <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a title="About" href="https://goprune.com/about/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">About</a></li>
              <li id="menu-item-601" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-601 dropdown"><a title="Our Journey" href="#">Our Journey </a><span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
                <ul role="menu" class=" dropdown-menu">
                  <li id="menu-item-602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-602"><a title="Results" href="https://goprune.com/results/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Results</a></li>
                </ul>
              </li>
              <li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388"><a title="Blog" href="https://goprune.com/blog/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Blog</a></li>
              <li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a title="Feedback" href="https://goprune.com/feedback/?customize_changeset_uuid=20530401-cb14-4cf8-8038-f57a1cf41377&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-6">Feedback</a></li>
            </ul>
          </div>
        </div>

        <div class="module widget-handle search-widget-handle hidden-xs hidden-sm">
          <button class="search">
<i class="fa fa-search"></i>
<span class="title">Site Search</span>
</button>
          <div class="function">
            <form role="search" method="get" id="searchform" class="search-form" action="https://goprune.com/" target="_self"><input type="hidden" name="customize_messenger_channel" value="preview-6"><input type="hidden" name="customize_autosaved" value="on"><input type="hidden" name="customize_changeset_uuid" value="20530401-cb14-4cf8-8038-f57a1cf41377">
              <label class="screen-reader-text" for="s">Search for:</label>
              <input type="text" placeholder="Type Here" value="" name="s" id="s">
              <button type="submit" class="searchsubmit"><i class="fa fa-search" aria-hidden="true"></i><span class="screen-reader-text">Search</span></button>
            </form>
          </div>
        </div>
      </div>

    </div>
  </div>
</nav>

<div>
<a href='#'>test</a>
</div>

​

Answer 2

您可以使用text-decoration: none将站点导航的a‘标记设置为不带下划线。

例如：

a(#site-navigation){
    text-decoration: none;
}