如何仅针对第 7 个孩子答案

【问题标题】：How to target the 7th child only如何仅针对第 7 个孩子
【发布时间】：2017-11-10 15:00:54
【问题描述】：

问题我有以下代码显示 Mura 提供的导航栏：

#$.dspPrimaryNav(
viewDepth=0
, id='navPrimary'
, class='nav navbar-nav nav-nowrap'
, displayHome='never'
, closeFolders=false 
, showCurrentChildrenOnly=false
, liHasKidsClass='dropdown'
, liHasKidsAttributes=''
, liCurrentClass=''
, liCurrentAttributes=''
, liHasKidsNestedClass='dropdown-submenu'
, aHasKidsClass='dropdown-toggle'
, aHasKidsAttributes='role="button" data-toggle="dropdown" data-target="##"'
, aCurrentClass=''
, aCurrentAttributes=''
, ulNestedClass='dropdown-menu'
, ulNestedAttributes=''
, aNotCurrentClass=''
, siteid=$.event('siteid')
)#

并显示以下导航栏：

如上所示，导航栏的第二行向右移动。我尝试了以下 css 将第二行与导航栏的第一行对齐：

#navPrimary ul:nth-child(3n+1){
    margin-left:-15px;
}

但是，它不起作用。任何帮助，将不胜感激。

【问题讨论】：

我建议你为你的问题创建小提琴。
您是要专门针对第七个元素，还是要针对导航栏换行的第一个元素？（可能不是第 7 个，取决于窗口/字体大小）

标签： html css css-selectors mura

【解决方案1】：

只需使用下面的代码来定位第 7 个孩子

#navPrimary ul li:nth-child(7){}

参考：CSS Tricks

【讨论】：

这将针对第 7 个ul。此外，您的选择器中还有一个额外的:。
我有点困... :D

【解决方案2】：

您可以使用以下 css 来定位列表的第 7 项。我假设所有链接都是同一个列表的一部分，所以我将 ul 更改为 li。

#navPrimary li:nth-child(7){
    margin-left:-15px;
}

【讨论】：