css选择器 ~ （波浪号）、+（加号）、>（大于号）的用法解析和举例
css选择器 ~ （波浪号）、+（加号）、>（大于号）的用法解析和举例~（波浪号）
~（波浪号）：A ~ B默示选择A标签后的所有B标签，但是A和B标签必须有雷同的父元素。
<style> h3~h5{ color: red; } </style> <body> <diZZZ> <h1>我是第1止</h1> <h2>我是第2止</h2> <diZZZ> <h3>我是第3止</h3> <h5>我是测试止</h5> <h4>我是第6止</h4> <h5>我是测试止</h5> </diZZZ> <h4>我是第4止</h4> <h5>我是第5止</h5> </diZZZ> </body>
h3~h5.png
h3~h5选择前面有<h3>元素的每个<h5>元素，即选择h3之后显现的所有h5，两种元素必须领有雷同的父元素，但h5没必要紧随h3。
注明：那里的h5，h3也可以换成真际名目中的其余标签的类名、标签名或id等。
+（加号）~（加号）加号又被称做兄弟选择器。A+B默示选择紧邻正在A背面的B元素，且A和B必须领有雷同的父元素，所选到的仅为一个B元素标签。
<style> h3+h5{ color: red; } </style> <body> <diZZZ> <h1>我是第1止</h1> <h2>我是第2止</h2> <diZZZ> <h3>我是第3止</h3> <h5>我是测试止</h5> <h4>我是第6止</h4> <h5>我是测试止</h5> </diZZZ> <h4>我是第4止</h4> <h5>我是第5止</h5> </diZZZ> </body>
h3+h5.png
>（大于号）大于号默示某个元素的下一代元素。A>B指选择A元素里面的B元素，此中B元素是A元素的第一代。
<style> .myDiZZZ>h3{ color: red; } </style> <body> <diZZZ> <h1>我是第1止</h1> <h2>我是第2止</h2> <diZZZ> <h3>我是测试止</h3> <diZZZ> <h3>我也是测试止</h3> </diZZZ> </diZZZ> <h4>我是第4止</h4> <h5>我是第5止</h5> </diZZZ> </body>.myDiZZZ>h3选择类名名为myDiZZZ里面的第一代h3。
myClass》h3.png
2024-07-07 12:02 阅读量:5