1. 程式人生 > >css3之通用兄弟元素選擇器

css3之通用兄弟元素選擇器

所謂兄弟元素選擇器:它是用來指定位於同一個父元素之中的某個元素之後的所有其他某個種類的兄弟元素所使用的樣式。

使用方式:
  <子元素>~<子元素之後的同級兄弟元素>{
   CSS樣式
 }

例如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span~p{
            background: green;
        }
    </style>
</head>
<body>
<div>
    <span>1234656</span>
    <span>1234656</span>
    <p>今天的bug,還沒找到原因!</p>
    <p>今天的bug,還沒找到原因!</p>
    <p>今天的bug,還沒找到原因!</p>

</div>
<span>123465164</span>
<p>今天的bug,還沒找到原因!</p>
<p>今天的bug,還沒找到原因!</p>
<p>今天的bug,還沒找到原因!</p>
<p>今天的bug,還沒找到原因!</p>
<div>
    <p>今天的bug,還沒找到原因!</p>
    <p>今天的bug,還沒找到原因!</p>
    <p>今天的bug,還沒找到原因!</p>
</div>
<p>今天的bug,還沒找到原因!</p>
<p>今天的bug,還沒找到原因!</p>
</body>
</html>