导航“.nav-links”的父子元素上的相同类 - 寻找最佳 CSS 解决方案答案

【问题标题】：Same class on parent and child element for navigation ".nav-links" - Looking for best CSS solution导航“.nav-links”的父子元素上的相同类 - 寻找最佳 CSS 解决方案
【发布时间】：2020-02-17 05:45:05
【问题描述】：

我必须为网站“.leftpart”创建左侧部分，其中我有带有 CSS 属性的父导航类“.nav-links”。我也有与父“.nav-links”下的子部分相同的类“.nav-links”。我想给子“.nav-links”[编辑和保存]一个不同的背景颜色“红色”。有人能建议最好的方法吗？

我的代码如下，在此先感谢：

.leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

【问题讨论】：

标签： html css

【解决方案1】：

只需使用一个额外的死者选择器，只改变背景属性：

.leftpart .nav-links .nav-links ul li a {
  background: red;
 }

.leftpart {
  width: 100%;
  display: block;
  margin: 20px;
}

.leftpart .nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.leftpart .nav-links ul li {
  margin-bottom: 20px;
}

.leftpart .nav-links ul li a {
  background: green;
  color: #fff;
  padding: 20px;
  display: inline-block;
}

.leftpart .nav-links .nav-links ul li a {
  background: red;
 }

<div class="leftpart">
  <div class="nav-links">
    <h1> Primary Links </h1>
    <ul>
      <li>
        <a href="/profile.html">Profile</a>
      </li>

      <li>
        <a href="/friends.html">Friends</a>
      </li>

      <li>
        <a href="/milestone.html">Milestones</a>
      </li>

      <li>
        <a href="/groups.html">Groups</a>
      </li>
    </ul>

    <div class="sub-seciton">
      <div class="nav-links">
        <ul>
          <li>
            <a href="#">Edit</a>
          </li>

          <li>
            <a href="#">Save</a>
          </li>
        </ul>
      </div>
    </div>

  </div>

  <div class="nav-links">
    <h1> Secondary Links </h1>
    <ul>
      <li>
        <a href="/privacy.html">Privacy</a>
      </li>

      <li>
        <a href="/settings.html">Settings</a>
      </li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案2】：

您需要在sub-section 中定位.nav-links。您还可以单独设置nav-links 兄弟姐妹的样式。看我的例子：

.leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart > .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

 .leftpart .nav-links .sub-seciton .nav-links  ul li a {
            background:red ;

 }

.leftpart > .nav-links:nth-child(2) ul li a {
background: blue;
}

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

【讨论】：

[ .leftpart > .nav-links:nth-child(2) ul li a ] 是可选的。我添加它只是为了您的理解。

【解决方案3】：

只需为它设置更具体的 CSS 代码：

        .leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

        .leftpart .nav-links .sub-seciton .nav-links ul li a {
           background:red;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

【讨论】：

【解决方案4】：

.leftpart {
          width: 100%;
          display: block;
          margin: 20px;
        }
        
      .leftpart .sub-seciton>.nav-links ul li:nth-child(1) a,
      .leftpart .sub-seciton>.nav-links ul li:nth-child(2) a{
          background:red;
        }

        .leftpart .nav-links ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .leftpart .nav-links ul li {
          margin-bottom:20px;
        }

        .leftpart .nav-links ul li a {
           background:green;
           color:#fff;
           padding: 20px;
           display: inline-block;
        }

<div class="leftpart">
        <div class="nav-links">
          <h1> Primary Links </h1>
          <ul>  
            <li>
              <a href="/profile.html">Profile</a>
            </li>

            <li>
              <a href="/friends.html">Friends</a>
            </li>

            <li>
              <a href="/milestone.html">Milestones</a>
            </li>

            <li>
              <a href="/groups.html">Groups</a>
            </li>
          </ul>

          <div class="sub-seciton">
              <div class="nav-links">
                <ul>                
                  <li>
                    <a href="#">Edit</a>
                  </li>

                  <li>
                    <a href="#">Save</a>
                  </li>
                </ul>
              </div>
          </div>
          
        </div>

        <div class="nav-links">        
          <h1> Secondary Links </h1>
          <ul>
            <li>
              <a href="/privacy.html">Privacy</a>
            </li>

            <li>
              <a href="/settings.html">Settings</a>
            </li>
          </ul>
        </div>
    </div>

【讨论】：