• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 兄弟选择器

    版本:CSS3

    定义和用法

    • E~F用于选择第一个元素之后所有的兄弟级的元素。只作用于同级元素.
    • 这两个元素必须具有相同的父元素。F不必紧跟E。

    语法:

    E~F{sRules}

    选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。

    需要注意的是,选择的只是同级的元素F,后代中的元素不会被选择。

    浏览器支持

    所有浏览器都支持

    例子

    只选择E元素之后的元素F,出现在E元素之前的元素F,不会被选择到。

    h3 ~ p{color:red;}
    
    <p>p0</p>
    <h3>这是一个标题</h3>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    
    
    //这个例子中,p1/p2/p3都会被选中;而p0因为在h3之前,所以不会被选中
    


    只作用于同级元素

    h3 ~ p{color:#f00;}
    
    <div>
    	<h3>这是一个标题</h3>
    	<p>p1</p>
    </div>
    <p>p2</p>
    <p>p3</p>
    
    
    //这个例子中,只有p1会被选中;p2、p3由于与h3并不是同级,所以不会被选中
    

    这是一个标题

    p1

    p2

    p3

    与相邻选择符(E+F)不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

    /*相邻选择符(E+F)*/
    h3 + p{color:#f00;}
    
    /*兄弟选择符(E~F)*/
    h3 ~ p{color:#f00;}
    
    <h3>这是一个标题</h3>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    
    
    
    //这个例子中,如果是相邻选择符,那么只有p1会变成红色;如果是兄弟选择符,那么p1/p2/p3都会变成红色;
    


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			p ~ ul{
    				background-color:#66cdcc;
    				color:red;
    			}
    		</style>
    	</head>
    	<body>
    	<div>
    		<div>一个div元素</div>
    		<ul>
    		<li>coffee</li>
    		<li>tea</li>
    		<li>milk</li>
    		</ul>
    		
    		<p>一个p元素</p>
    		<ul>
    		<li>coffee</li>
    		<li>tea</li>
    		<li>milk</li>
    		</ul>
    		
    		<h2>另一个ul表</h2>
    		<ul>
    		<li>coffee</li>
    		<li>tea</li>
    		<li>milk</li>
    		</ul>
    	</div>
    	</body>
    </html>
    

    上篇:相邻选择器