1. 兄弟选择器 ~
作用:
- 选择指定元素的以后的指定的兄弟元素(选择多个)
语法:
element~element
2. 兄弟选择器 +
作用:
- 选择指定元素以后的指定相邻兄弟元素(只选择一个)
语法:
element+element
3.代码示例:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.item1 ~ li {font-weight:bold;}
.item2 + li {font-size: 30px;}
</style>
</head>
<body>
<div>
<ul>
<li class="item1">List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li class="item2">List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
</div>
</body>
</html>
4.效果展示:
image