关闭

CSS 相邻兄弟选择器

标签: css 相邻兄弟选择器 基础 概念
442人阅读 评论(0) 收藏 举报

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

文中的例子如下:


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


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

li + li {font-weight:bold;}

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


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

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

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

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




1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

相邻兄弟选择器(+)

今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故,动画使用JQuery的animation函数来实现的。当完成导航栏的制作后,我突发奇想如果不需要用到任何JS是否可以实...
  • bingkingboy
  • bingkingboy
  • 2016-03-31 17:12
  • 3868

CSS相邻兄弟选择器和普通相邻兄弟选择器

看字面意思很难区别,直接上代码看效果 相邻兄弟选择器: 菜鸟教程(runoob.com) div+p { background-color:yellow; } Welcome to My Homepage My name is Donald I live in Duc...
  • qq_21163257
  • qq_21163257
  • 2016-11-14 21:55
  • 2556

CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器

CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器   1.子元素选择器。选择作为某元素的子元素的元素。 格式:父元素 > 子元素 {声明} 例如: h1 > strong { color:red;} HTML中: ···&...
  • wulinbanxia
  • wulinbanxia
  • 2016-10-30 13:35
  • 414

HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器

HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器
  • qq_37768482
  • qq_37768482
  • 2017-05-09 17:19
  • 434

css相邻兄弟元素选择器

要选择紧接在另一个元素后的元素,并且二者有相同的父元素,可以使用相邻兄弟结合符,这表示为一个加号(+)。与子结合符一样,相邻兄弟结合符旁边可以有空白符。要去除紧接在一个h1元素后出现的段落的上边距h1 + p {margin-top: 0;}如果相邻元素之间多了一行文本,还是可以用+选择器来匹配第二...
  • xmloveth
  • xmloveth
  • 2017-02-04 13:59
  • 771

CSS相邻兄弟选择器和普通相邻兄弟选择器

看字面意思很难区别,直接上代码看效果 相邻兄弟选择器: 菜鸟教程(runoob.com) div+p { background-color:yellow; } Welcome to My Homepage My name is Donald I live in Duc...
  • qq_21163257
  • qq_21163257
  • 2016-11-14 21:55
  • 2556

相邻兄弟选择器(+)

今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故,动画使用JQuery的animation函数来实现的。当完成导航栏的制作后,我突发奇想如果不需要用到任何JS是否可以实...
  • bingkingboy
  • bingkingboy
  • 2016-03-31 17:12
  • 3868

兄弟选择器(+ 和 ~)

1. + 选择器  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。      比如:<style type="text/css"> h1 + p { margin-top:50px; ...
  • u014291497
  • u014291497
  • 2016-01-08 14:51
  • 10254

jquery 孩子和兄弟选择器

Jquery 孩子和兄弟选择器分为4类,1 后代选择器(A B) ;2 孩子选择器(A>B) ;3相邻兄弟选择器(A+B); 一般兄弟选择器(A~B). 以下让我们通过一个例子来理解它们的不同。   首先,你必须理解孩子和兄弟之间的不同即child和sibling的不同。看一下例...
  • taiyb
  • taiyb
  • 2014-10-30 23:16
  • 9175

选择器之相邻兄弟选择器、后代选择器、子代选择器

相邻兄弟选择器相邻兄弟选择器困扰我很久了,从字面上理解感觉还是很好理解,但是就是不会使用,也是查了很多资料,最后才真正的解决了,也能够比较正常的使用。下面是我整理的一些相关笔记。选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent s...
  • ZYY88886666
  • ZYY88886666
  • 2016-12-20 11:37
  • 196
    个人资料
    • 访问:1125次
    • 积分:46
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类