用于导航的父元素和子元素上的相同类 ".nav-links" - 寻找最佳 CSS 解决方案

Question

我必须为网站".leftpart"创建左侧部分，其中我有带有CSS属性的父导航类".nav链接"。我也有相同的类".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>

Answer 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>

Answer 2

您需要将.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>

Answer 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>

Answer 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>