A>B表示选择A元素的所有子B元素,与A B不同的是,A B选择所有后代元素,为A>B只选择一代。
A+B{} 这个+是选择相邻兄弟,称作“相邻兄弟选择器”,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,(兄弟的意思就是相邻,可以不是同一种元素)
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。}
再例如:
一个列表,li元素,只有前四个有底边框。最后一个没有。
ul li+li{ border-top:1px solid red}
// 第一个li 不加 后面的兄弟元素加就可以了。
A~B选择器 A之后出现的所有B。
两种元素必须拥有相同的父元素,但是 B不必直接紧随A。
1.A>B 表示选择A元素的所有子B元素(只选择第一代)
2.A B 表示选择A元素的所有子B元素(选择在A标签里面所有的B元素,不止第一代)
3.A+B 表示HTML中紧随A的B元素,而且二者有相同的父元素:用一个结合符只能选择两个相邻兄弟中的第二个元素
li + li {font-weight:bold}
上面这个选择器只会把列表中的第二个及后面的li都变为粗体,但第一个列表项不受影响。
4.A~B选择器 A之后出现的所有B。两种元素必须拥有相同的父元素,但是 B不必直接紧随A
一个是子类选择器,一个是后代选择器。div>p 是子类选择器,选择所有div的所有子元素中p元素(不包括孙子类元素)。
div p 是后代选择器,选择所有div中所包含的所有p元素(包括孙子类元素)。