兄弟选择器(+和~)


1. + 选择器

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

<style type="text/css">
    h1 + p {
        margin-top:50px;
        color:red;
    }
</style>


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

  效果如图:
  这里写图片描述
  兄弟只会印象下面的p标签的样式,不影响上面兄弟的样式。
  注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。
  当然这个也会循环查找,即当两个兄弟元素相同时,会一次循环查找:
  示例:
  

<style type="text/css">
    li + li {
        color:red;
    }
</style>

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

  效果:
  这里写图片描述
  可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。

  2. ~ 选择器
  作用是查找某一个指定元素的后面的所有兄弟结点。
  示例代码:
  

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>

  运行结果:
  

  这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页