css常见的选择器（权重）：
id选择器（100），类选择器（10），标签选择器（1）， 子代选择器（权重相加），后代选择器（权重相加），伪类选择器（10），伪元素选择器（1），分组选择器
优先级：id选择器>类选择器（伪类选择器）>标签选择器（伪类选择器）
类选择器：类名前加符号.
.类名{
}
<style>
.contain{
width: 200px;
height: 200px;
background: red;
color: aliceblue;
}
</style>
<body>
<div class="contain">
hello
</div>
id选择器：id明前加符号#
#id名{
}
<style>
#contain{
width: 200px;
height: 200px;
background: red;
color: black;
}
</style>
<body>
<div id="contain">
hello
</div>
子代选择器：父元素通过>选择子元素
父元素>子元素{
}
<style>
#contain>#wapper{
width: 200px;
height: 200px;
background: red;
color: white;
}
</style>
<body>
<div id="contain">
<span id="wapper">hello</span>
<span>good morning</span>
</div>
后代选择器：祖先元素（空格）后代元素
<style>
#contain #content{
width: 200px;
height: 200px;
background: red;
color: black;
}
</style>
<body>
<div id="contain">
<span>hello
<span id="content">good morning</span>
</span>
</div>
分组选择器： 用符号，连接
<style>
#wapper,.main{
width: 200px;
height: 200px;
background: red;
color: white;
}
</style>
<body>
<div id="contain">
<div id="wapper">hello</div>
<span>good morning</span>
<div class="main">momomo</div>
</div>
