CSS选择器中包含着一些特殊符号,比如逗号(,),空格( ),大于号(>),加号(+),波浪号(~)。那么他们都代表什么意思呢?
群组选择器(’,’)
/* 表示同时选择h1,h2 */
h1, h2 {
...
}
子元素选择器(空格)
/* 表示选择 h1 下面的所有 span 元素,不管是否以 h1 为直接父元素 */
h1 span {
...
}
直接子元素选择器(’>’)
/* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素,注意与空格的区别,空格不要是为直接父元素,而 > 必须以 h1 为直接父元素 */
h1 > span {
...
}
相邻兄弟选择器(’+’)
/* 表示选择紧跟在 h1 后的首个兄弟 span 元素,h1 和 span 必须有相同的父元素,即二者必须是同一级元素 */
h1 + span {
...
}
兄弟选择器(’~’)
/* 表示选择 h1 后的所有兄弟 span 元素,h1 和 span 必须有相同的父元素,即二者必须是同一级元素。注意与 + 的区别,+ 必须是紧跟着的兄弟元素,而 ~ 不要求紧跟,是所有兄弟元素 */
h1 ~ span {
...
}