CSS关系选择器有哪些

CSS中除了几种常用的选择器之外，还包含其他几种关系类型的选择器,在这里做一下简单介绍。

后代选择器(E F)

后代选择器也称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说E F,前面E为祖先元素，F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意它们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素还是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中。

子元素选择器(E>F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代
元素,而子元素选择器E>F,其中F仅仅是E的子元素而以。

相邻兄弟元素选择器(E+F)

相邻兄弟元素选择器可以选择紧接在另一元素后的元素,而且它们具有一个相同的父元素,换句话说,E、F两元素具有一个相同的父元素,而且F元素在E元素后面,并且相邻,这样就可以使用相邻兄弟元素选择器来选择F元素。

群组选择器

群组选择器是将具有相同样式的元素分组在起，每个选择器之间使用逗号“,”隔开，如selector, selector2,…, selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不用这个逗号,那么所表达的意就完全不同了,省去逗号就成了前面所说的后代选择器,这一点在使用中千万要小心。

通用兄弟元素选择器(E~F)

通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,它们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E~F选择器将选择所有E元素后面的F元素。