CSS选择器--猫头鹰选择器

html-css08

CSS选择器--猫头鹰选择器,第1张

猫头鹰选择器,因为 + 这种方式酷似猫头鹰,被称为猫头鹰选择器。

上面定义了一个简单的猫头鹰选择器

+: 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

*: 通配符,代表任意元素。

以前总不爱用也记不住相邻兄弟选择器,直到我看到一篇分享,总结然后自己写了写,这次我感觉我不会忘了~

举一个简单的ul,li的列表例子,实现如下效果:

常规写法(使用last-child选择器):

写法2(使用not选择器):

写法2(使用+选择器):

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。