1. >(大于号) 选择某元素后面的第一代子元素 (用class类名也是可以的)
<style type="text/css">
.qq > .ww {
color: red;
}
</style>
<body>
<h1 class="qq">
<strong class="ww">h1下的一代子元素</strong>
</h1>
<h1 class="qq">
<span>
<strong class="ww">h1下的二代子元素</strong>
</span>
</h1>
</body>
----------------------------------------------------------
<style type="text/css">
h1 > strong {
color: red;
}
</style>
<body>
<h1 class="qq">
<strong class="ww">h1下的一代子元素</strong>
</h1>
<h1 class="qq">
<span>
<strong class="ww">h1下的二代子元素</strong>
</span>
</h1>
</body>
效果:
2. ~(波浪号) 选取 某个元素之后的所有相同元素
注意:这个选择器两种元素必须处于同一个父元素内,被选取的元素不必直接紧随。
<style type="text/css">
.box~h2{
background: aqua;
}
</style>
<body>
<div class="box"></div>
<h2>1</h2>
<em>2</em>
<span><h2>123</h2></span>
<h2>3</h2>
<h2>4</h2>
</body>
效果:
3. 空格 选择某元素后面的所有子元素
<style type="text/css">
h1 strong {
color: red;
}
</style>
<body>
<h1>
<strong>一代子元素</strong>
</h1>
<h1>
<span>
<strong>二代子元素</strong>
</span>
</h1>
</body>
效果:
4. ,(逗号) 可以对选择器进行分组,被分组的选择器就可以分享相同的声明
<style type="text/css">
h1,h2,h3{
color: blue;
}
h4,h5,h6{
color: red;
}
</style>
<body>
<h1>qwer</h1>
<h2>qwer</h2>
<h3>qwer</h3>
<h4>qwer</h4>
<h5>qwer</h5>
<h6>qwer</h6>
</body>
效果:
5. +(加号)相邻兄弟选择器 可选择紧接在另一元素后的元素,且二者需要有相同父元素
<style type="text/css">
span+em{
color: red;
}
</style>
<body>
<h1>
<span>qwer1</span>
<em>qwer2</em>
</h1>
<span>qwer1</span>
<div><em>qwer2</em></div>
</body>
效果: