CSS 相邻兄弟选择器

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

文中的例子如下:


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


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

li + li {font-weight:bold;}

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


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

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

这时,我回头仔细查看了定义解释,【可选择紧接在另一元素后的元素,且二者有相同父元素】。这就好理解了,他只选择一个元素后的元素,也就是<li>之后的<li>,因为这里有很多<li>,所以可能产生混淆。

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值