如何用nth-child选择到具体的标签

撰写时间:2019年1月18日

我们先来看一下下面的html的代码部分

我们可以看到在dh_right这个类下的同级元素下有a标签还有i标签，而我所讲的就是如何选择到包含客户服务的a标签，

我们一般都会用nth-child()这个，那么问题来了，我们应该在括号填几了？有同学就会说填4，因为客户服务所在的a标签位置为4，言下之意就是把i标签排除了，可是真实情况是这样吗？我们来试验一下：


我给了第四个a标签一个黑色的背景颜色，但是在第三幅图中它却没有出现黑色，这是为什么了？其实应该填5，i标签才是第四个,这里i标签也得算进去，我们在试验一下：

第四幅图可以看到我给了客户服务所在的a标签一些内容，第五幅图中我也点击到了客户服务所在的a标签，右下角也出现了跟左图一样的描述，第五幅图中客户服务也明显出现了这些样式。
所以这就说明了我们要找的某个标签在同级元素中，就算这个同级元素有着不同类型的标签，也得将其数进去。

以上讲的是子元素的如何选择某个标签的方法，我们再来讲一下子元素的子元素的选择某个标签的方法

我们先来看一下下面的html的代码部分

我们可以看到客户服务和网站导航这两个a标签下分别有着em和p两个标签，那么怎样选择到客户服务下的em标签了，

假如我们这样来选择：.dh_right a em:nth-child(1)：

我给了它红色的背景颜色，但是两个em标签都出现了红色，很明显看到这样选择是错的，我们应该这这样写才对：

所以我们可以运用子元素的选择方法，先明确选择到某个子元素，在选择到下面具体的某个标签，这样就不会出现两个标签出现同样的样式。