千家信息网

CSS相邻兄弟结合符旁边可以有空白符吗

发表于:2024-11-16 作者:千家信息网编辑
千家信息网最后更新 2024年11月16日,这篇文章主要介绍"CSS相邻兄弟结合符旁边可以有空白符吗"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"CSS相邻兄弟结合符旁边可以有空白符吗"文章能帮助大家解
千家信息网最后更新 2024年11月16日CSS相邻兄弟结合符旁边可以有空白符吗

这篇文章主要介绍"CSS相邻兄弟结合符旁边可以有空白符吗"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"CSS相邻兄弟结合符旁边可以有空白符吗"文章能帮助大家解决问题。

相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。

请看下面这个文档树片段:

  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. List item 3

在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

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

li + li {font-weight:bold;}

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

关于"CSS相邻兄弟结合符旁边可以有空白符吗"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注行业资讯频道,小编每天都会为大家更新不同的知识点。

0