CSS 相邻兄弟选择器

      学习w3school的CSS教程,在学到相邻兄弟选择器(Adjacent sibling selector)时,出现了一点疑惑。

文中的例子如下:

CSS 相邻兄弟选择器_第1张图片

对于这段代码,教程中是这样解释的,


请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。


当时的疑惑是为什么选择器只会把列表中的第二个和第三个列表项变为粗体,而第一个列表不受影响呢?

之后在网上查询了以下,大部分是复制教程中的这句话,并没有作详细解释。但是,其中一个帖子中提到了因为第一个

  • 元素前没有
  • 这时,我回头仔细查看了定义解释,【可选择紧接在另一元素后的元素,且二者有相同父元素】。这就好理解了,他只选择一个元素后的元素,也就是

  • 之后的
  • ,因为这里有很多
  • ,所以可能产生混淆。

    这里,我想起了以前学习的过程中,我们也会犯忽视基础概念的错误,而只重视实际应用的表象,由此可见,任何知识的学习,基础概念是十分重要的




  • 你可能感兴趣的:(CSS 相邻兄弟选择器)