首页前端开发CSSCSS的相邻兄弟选择器何时用

CSS的相邻兄弟选择器何时用

时间2024-05-21 13:48:03发布访客分类CSS浏览70
导读: 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacentsiblingselector)。 例如,如果要增加紧接在h1元素后出现的段落的上边距,可以这样写: ...
  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacentsiblingselector)。   例如,如果要增加紧接在h1元素后出现的段落的上边距,可以这样写:                  h1+p{ margin-top:50px; }            

Thisisaheading.

  

Thisisparagraph.

  

Thisisparagraph.

  

Thisisparagraph.

  

Thisisparagraph.

  

Thisisparagraph.

        这个选择器读作:"选择紧接在h1元素后出现的段落,h1和p元素拥有共同的父元素"。   语法解释:   相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacentsiblingcombinator)。   注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。   请看下面这个文档树片段:   
  
      
  • Listitem1
  •   
  • Listitem2
  •   
  • Listitem3
  •   
  
      
  1. Listitem1
  2.   
  3. Listitem2
  4.   
  5. Listitem3
  6.   
  
  在上面的片段中,div元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。   不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。   请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:   li+li{ font-weight:bold; }   上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。





本文转载自中文网

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: CSS的相邻兄弟选择器何时用
本文地址: https://pptw.com/jishu/664907.html
CSS轮廓(outline)是什么 Torch中如何处理时间序列数据

游客 回复需填写必要信息