Loading... ## 后代选择器 ## 用单个空格表示，例如要匹配article的子元素p，便可以直接写成article p,这样在article元素中的所有p标签都将被选中 ```css article p ``` ## 子代关系选择器 ## 子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配(即子代的子代等）。例如，只选中作为<article>的直接子元素的<p>元素： ```css article > p ``` <div class="tip inlineBlock info"> 后代选择器和子代关系选择器的区别在于，后代选择器可以选中子代关系更远的子代，比如子代的子代的子代等，但是子代关系选择器只能选中父代后的子代而不能延续到孙子代，但是他们都可以无限匹配符合条件的子代，不会被中间插入的元素所阻碍 </div> ## 邻接兄弟 ## **邻接兄弟选择器（+）** 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。例如，选中紧随<p>元素之后的<img>元素： ```css p + img ``` <div class="tip inlineBlock warning"> 必须注意的是，这两种元素必须属于同级元素，且必须连在一起，中间不能有其他元素,只要一直有相邻，就可以一直匹配 </div> ## 通用兄弟 ## 位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。要选中所有的<p>元素后任何地方的<img>元素，会这样做： ```cssp ~ img ``` <div class="tip inlineBlock info"> 选择器可以互相搭配组合从而达到自己想要的自定义效果，例如ul > li[class="a"] { } </div> Last modification：July 26, 2021 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用，请随意赞赏
