前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 相邻兄弟选择器

CSS 相邻兄弟选择器

作者头像
全栈程序员站长
发布2022-07-14 20:16:13
6660
发布2022-07-14 20:16:13
举报

大家好,又见面了,我是全栈君

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

代码语言:javascript
复制
h1 + p {margin-top:50px;}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

例子:

代码语言:javascript
复制
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:200px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph. </p>
<p>This is paragraph.http://www.cnblogs.com/roucheng</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

语法解释

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

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

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

代码语言:javascript
复制
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

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

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

代码语言:javascript
复制
li + li {font-weight:bold;}

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

例子:

代码语言:javascript
复制
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 li + li {font-weight:bold;}
 6 </style>
 7 </head>
 8 
 9 <body>
10 <div>
11   <ul>
12     <li>List item 1</li>
13     <li>List item 2</li>
14     <li>List item 3</li>
15   </ul>
16   <ol>
17     <li>List item 1</li>
18     <li>List item 2</li>
19     <li>List item 3</li>
20   </ol>
21 </div>
22 </body>
23 </html>

结合其他选择器

相邻兄弟结合符还可以结合其他结合符:

代码语言:javascript
复制
html > body table + ul {margin-top:20px;}

这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/120785.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年12月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 选择相邻兄弟
  • 语法解释
  • 结合其他选择器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档