CSS选择器-孩⼦孙⼦-兄弟（~+）>  是⼉⼦辈的选择器，只选择⼉⼦辈
先写⼀个最基本的（可以在本地跑⼀下试⼀试）：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
</article>
</div>
</body>
</html>
View Code
区别于这个：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article>h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
</article>
</div>
</body>
</html>
View Code ·······················································
~是兄弟选择器，但是只是选择的兄弟的后⾯的兄弟被选择
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h2~h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h2>div下的article的h2标签-1</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
<h2>div下的article的h2标签-4</h2>
</article>
</div>
</body>
</html>
View Code
+是“铁兄弟”选择器，只选择紧挨着他的，如果后⾯第⼀个紧挨着的不是他，那就不选了。参考⼀下两个：第⼀个是没有“铁兄弟”，第⼆个是选择了“铁兄弟”：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h1+h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h1>div下的article的h2标签-1</h1>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
css兄弟选择器<h2>div下的article的h2标签-4</h2>
</article>
</div>
</body>
</html>
View Code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>测试⽹页</title>
<style>
div article h1+h2{
color:blue;
}
</style>
</head>
<body>
<div>
<article>
<h1>div下的article的h2标签-1</h1>
<h2>我是上⾯的铁兄弟！</h2>
<div>
<h2>div下的article下的div下的h2标签-2</h2>
</div>
<h2>div下的article的h2标签-3</h2>
<h2>div下的article的h2标签-4</h2>
</article>
</div>
</body>
</html>
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。