谈谈CSS选择器（下）

这是我参与新手入门的第3篇文章。

hello，各位小伙伴们大家好呀，我是白祁。对于前端工程师来说，常用的CSS选择器大家必然不会陌生，但是对于一部分平时不太会用到的选择器，你真的够了解吗？本系列将会分两篇讲讲CSS中的选择器，第一篇讲过有哪些基础的选择器。没看过的小伙伴抓紧啦，指路：谈谈CSS选择器（上）

这一篇咱们会讲这些选择器衍生出来的用法。

一、CSS组合器

在讲CSS选择器的衍生用法时，就不得不提到CSS的组合器，组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

• 后代选择器 (空格)
• 子选择器 (>)
• 相邻兄弟选择器 (+)
• 通用兄弟选择器 (~)

二、组合器的使用

在了解到CSS组合器了之后，我们将其与上一篇讲过的CSS基础选择器结合使用，便会有非常多选择元素的方案。例如：

/*选择P元素内的所有a元素*/
p a{
    color:yellow;
}
复制代码

这里要注意的是，只要是嵌套在p元素内的a元素都会被选择到。

我们再来看一个例子：

/*选择父元素是p元素的a元素*/
p>a{
    color:yellow;
}
复制代码

那这个例子中与上个例子的区别就在于，这里只会选择父级是p元素的a元素，如果p元素和a元素的层级中含有一个span元素，那么这个a元素是不会被选择到的。

对于相邻兄弟选择器，我们看看下面这个例子。

/*选择p元素后面的首个a元素*/
p+a{
    color:yellow;
}
复制代码

这里会选择的p元素后的第一个a元素，且此时p元素和a元素是同级的。

对应的通用兄弟选择器，我们来看下一个例子：

/*选择与p元素有相同父元素且同级的a元素*/
p~a{
    color:yellow;
}
复制代码

这里会选择与p元素有相同父元素且同级的a元素，无论a元素是不是第一个，都会被选择到。

那么在了解到组合器和选择器的基本用法后，对于大部分元素，我们都能选择到了。

对于基础选择器，其实有一些扩展的语法。例如属性选择器的用法：

还有一些其他的扩展语法，由于篇幅问题，我就不一一列举出来的，有兴趣的同学可以翻阅CSS手册。