•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

CSS的相邻兄弟选择器什么时候用【html5教程】,CSS

摘要: 相邻兄弟挑选器(Adjacentsiblingselector)可挑选紧接在另一元素后的元素,且两者有雷同父元素。挑选相邻兄弟(引荐进修: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网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号