Question

下面是我的html代码，其中我在段落下有四个跨度，我想为它们做不同的样式。

HTML MARKUP：

<div class="logobar">
    <p>
    <span>Heading text </span><span class="glyphicon glyphicon-chevron-right"></span><span>Audit Creation</span>
    <font class="pull-right">matt@heller.com<span class="glyphicon glyphicon-chevron-down"></span></font>
    </p>
</div>

因此，为了将css应用于所有孩子，我正在使用nth-child选择器。当我这样做时，前三个跨度正在获得他们的css，但第四个是使用第一个孩子的CSS。我不知道为什么？

CSS：

.logoBar p span:nth-child(1){
    font-family:ubuntuBold;
    font-size:24px; 
}
.logoBar p span:nth-child(2){
    margin: 0 18px; 
}
.logoBar p span:nth-child(3){
    font-family:ubuntuMedium;
    font-size:18px; 
}
.logoBar p span:nth-child(4){
    margin:0 18px;
}

我猜：

我认为这是因为我在字体标签内部有最后一个跨度，因此不是段落的直接子节点。我应该使用以下css来执行此操作：

.logoBar p font span:nth-child(1){
        margin:0 18px;
 }

如果我对某些标准解决方案有误，请纠正我。

Answer 1

你的猜测是正确的。 nth-child相对于它的父级是有效的，因为它的父级是<font>标记，它是第一个孩子（也是最后一个），但不是第四个。

.logoBar p *:last-child span{
    margin:0 18px;
}

为了解决它也是第一个孩子的跨度这一事实，将所有其他人改为使他们只是段落标记的直接子项

.logoBar p>span...

Answer 2

您需要选择最后一个跨度的内容如图所示

＆＃13;

.logoBar p font span{
    margin:0 18px;	
}

＆＃13;

有一点你需要看到你想要应用你最后一个给你的span元素的样式

所以我尝试了简单的一个，因为它可能对你有所帮助。

＆＃13;

.logoBar p font span{
    margin:0 18px;
	color :red;	
}

＆＃13;

<div class="logobar">
    <p>
    <span>Heading text </span><span class="glyphicon glyphicon-chevron-right"></span><span>Audit Creation</span>
    <font class="pull-right">matt@heller.com<span class="glyphicon glyphicon-chevron-down">whats aappppp</span></font>
    </p>
</div>

＆＃13;

Answer 3

.logoBar p font span:nth-child(1){
  margin:0 18px;
}

是的，你是对的。它因为字体。由于字体标记干扰了层次结构，因此logoBar无法找到第四个子节点。因此，您需要在类中包含字体以及第n个子编号。另外，请在HTML代码中将类名logobar更新为logoBar。

nth-child选择器无法选择最后一个孩子

3 个答案: