CSS选择器--相邻兄弟选择器

2021-10-18 861 0

CSS相邻兄弟选择器--“+”加号选择器：

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;color:red;}
</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>

运行结果：

兄弟选择器只会印象下面的p标签的样式，不影响上面兄弟的样式。

注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。

当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;color:red;}
</style>
</head>
<body>
<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>
</body>
</html>

运行结果：