后代选择器

用单个空格表示,例如要匹配article的子元素p,便可以直接写成article p,这样在article元素中的所有p标签都将被选中

article p

子代关系选择器

子代关系选择器是个大于号(>),只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配(即子代的子代等)。例如,只选中作为<article>的直接子元素的<p>元素:

article > p

后代选择器和子代关系选择器的区别在于,后代选择器可以选中子代关系更远的子代,比如子代的子代的子代等,但是子代关系选择器只能选中父代后的子代而不能延续到孙子代,但是他们都可以无限匹配符合条件的子代,不会被中间插入的元素所阻碍

邻接兄弟

邻接兄弟选择器(+)
当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。例如,选中紧随<p>元素之后的元素:

p + img

必须注意的是,这两种元素必须属于同级元素,且必须连在一起,中间不能有其他元素,只要一直有相邻,就可以一直匹配

通用兄弟

位置无须紧邻,只须同层级,A~B 选择A元素之后所有同层级B元素。要选中所有的<p>元素后任何地方的元素,会这样做:
`cssp ~ img


选择器可以互相搭配组合从而达到自己想要的自定义效果,例如ul > li[class="a"] { }
Last modification:July 26th, 2021 at 10:46 am
如果觉得我的文章对你有用,请随意赞赏