外观
CSS选择器
使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。
id选择器
<div id="s1">id选择器</div>
<style>
#s1 {
color: red;
}
</style>类选择器
<div class="s2">类选择器1</div>
<div class="s2">类选择器2</div>
<div class="s3">类选择器3</div>
<style>
.s2{
color: green;
}
/* 可以将多个选择器写在一起 */
.s2,.s3,#s1{
font-style:italic;
}
</style>标签选择器
<p>标签选择器1</p>
<p>标签选择器2</p>
<style>
p{
color: blue;
}
</style>相邻选择器
<div id="s4">相邻选择器 +</div>
<div>相邻选择器</div>
<!-- + 只选择紧邻的兄弟 -->
<div id="s5">相邻选择器 ~</div>
<div class="s6">相邻选择器</div>
<div class="s6">相邻选择器</div>
<div class="s6">相邻选择器</div>
<!-- ~ 选择兄弟以及兄弟的兄弟..... -->
<style>
#s4 + div{
color: #0033ff;
}
#s5 ~ .s6{
color: #FFD700;
}
</style>子元素选择器
<div class="s7">
<div>子元素选择器</div>
<em>
<div>子元素选择器不被选择</div>
<div>子元素选择器不被选择</div>
</em>
</div>
<style>
/* 子选择器会选择下一级 */
.s7 > div{
color: #E066FF;
}
</style>后代选择器
<div class="s8">
<div>后代选择器</div>
<em>
<div>后代选择器</div>
<div>后代选择器</div>
</em>
</div>
<style>
/* 后代选择器会选择全部后代 */
.s8 div{
color: #7CFC00;
}
</style>通配符选择器
<div class="s9">
<div>通配符选择器</div>
<em>通配符选择器</em>
</div>
<style>
.s9 * {
color: #3370CC
}
</style>属性选择器
<div rel="s10" >属性选择器</div>
<style>
div[rel="s10"]{
color: #573CC4
}
</style>