怎样有效使用CSS普通相邻选择符

html-css024

怎样有效使用CSS普通相邻选择符,第1张

你说的是相邻的兄弟元素,还是相邻的父子元素

如果两个相邻的元素是兄弟元素,有共同的父元素,则用相邻兄弟选择器:+

如果两个相邻的元素是父子元素,则用子元素选择器:>

+号在css中,是相邻兄弟选择器的符号,不是什么hack

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

+ 是兄弟选择器,css选择器会对所有满足要求的元素进行匹配

例如 tr+tr+tr

对第一行,表示第一行的兄弟的兄弟,那就是第三行

对第二行,表示第二行的兄弟的兄弟,那就是第四行

。。。

对第六行,表示第六行的兄弟的兄弟,那就是第八行

对第七行,表示第七行的兄弟的兄弟,不存在,同理第八行业不存在

所以tr+tr+tr匹配第3-8行,tr+tr+tr+tr匹配第4-8行