时间戳

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

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

问题描述

我必须为网站“.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>

标签： htmlcss

解决方案

您需要.nav-links在sub-section. 您还可以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>

推荐阅读