学编程 ❀(๑╯◡╰๑)❀ 就上soxunxi.cn!这里有CMS,CSS,NET,PHP,Linux,HTML,JAVA,MySQL,Python等教程.
当前位置: CSS > CSS的相邻兄弟选择器什么时候用【css教程】,CSS

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

挑选相邻兄弟 ( 引荐进修:CSS教程 )

假如须要挑选紧接在另一个元素后的元素,而且两者有雷同的父元素,能够运用相邻兄弟挑选器(Adjacent sibling selector)。

比方,假如要增添紧接在 h1 元素后涌现的段落的上边距,能够如许写:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

这个挑选器读作:“挑选紧接在 h1 元素后涌现的段落,h1 和 p 元素具有配合的父元素”。

语法诠释:

相邻兄弟挑选器运用了加号(+),即相邻兄弟连系符(Adjacent sibling combinator)。

解释:与子连系符一样,相邻兄弟连系符旁边能够有空白符。

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

<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 元素中包括两个列表:一个无序列表,一个有序列表,每一个列表都包括三个列表项。这两个列表是相邻兄弟,列表项自身也是相邻兄弟。

不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,由于这两组列表项不属于同一父元素(最多只能算堂兄弟)。

请记着,用一个连系符只能挑选两个相邻兄弟中的第二个元素。请看下面的挑选器:

li + li {font-weight:bold;}

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

以上就是CSS的相邻兄弟挑选器什么时候用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS的相邻兄弟选择器什么时候用【css教程】,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线