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

2024-01-18 10:42 小编
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacentsiblingselector)。
 
  例如,如果要增加紧接在h1元素后出现的段落的上边距,可以这样写:
 
  
 
  <!DOCTYPEHTML>
 
  <html>
 
  <head>
 
  <styletype="text/css">
 
  h1+p{margin-top:50px;}
 
  </style>
 
  </head>
 
  <body>
 
  <h1>Thisisaheading.</h1>
 
  <p>Thisisparagraph.</p>
 
  <p>Thisisparagraph.</p>
 
  <p>Thisisparagraph.</p>
 
  <p>Thisisparagraph.</p>
 
  <p>Thisisparagraph.</p>
 
  </body>
 
  </html>
 
  这个选择器读作:“选择紧接在h1元素后出现的段落,h1和p元素拥有共同的父元素”。
 
  语法解释:
 
  相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacentsiblingcombinator)。
 
  注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
 
  请看下面这个文档树片段:
 
  <div>
 
  <ul>
 
  <li>Listitem1</li>
 
  <li>Listitem2</li>
 
  <li>Listitem3</li>
 
  </ul>
 
  <ol>
 
  <li>Listitem1</li>
 
  <li>Listitem2</li>
 
  <li>Listitem3</li>
 
  </ol>
 
  </div>
 
  在上面的片段中,div元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。
 
  不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。
 
  请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
 
  li+li{font-weight:bold;}
 
  上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。


Tag: 选择
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码