css3兄弟节点+ ~
2019-07-29 本文已影响0人
浪浪山小妖_
css3兄弟节点有两种相关符号:+和~
<body>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
<h3 class="h3">这是标题标签</h3>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
<h3>这是标题标签</h3>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
</body>
1.先看
~号
<style>
.h3 ~ p{
color: red;
}
</style>
效果如下
image.png
2.先看
+号
<style>
.h3 + p{
color: red;
}
</style>
效果大不同如下
image.png
结论:
~号选择器,表示获取紧邻的下一个,后面所有的兄弟节点,但不包括前面的.
+号选择器,表示获取紧邻的下一个,仅此一个兄弟节点
附带一个
+号的特别用法
<head>
<meta charset="UTF-8">
<title>加号选择器</title>
<style>
ul{
list-style: none;
}
li{
float: left;
width: 50px;
height: 40px;
background: #eee;
}
li+li{
border-left: 1px solid #666666;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
其效果如下
image.png
--by Affandi ⊙▽⊙
