版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weclove2008/article/details/74094485
子选择器（第一代）
符号：>
作用：选中儿子元素
示例：
<style type="text/css">
.music>li{border:1px solid red;} <!-border边框样式-->
<!--操作区-->
<body>
<h1>Music Singer</h1>
<ul class="music">
<li>Chinese
<ul>
<li>Leijun</li>
<li>JayChou</li>
<li>SilerChao</li>
</ul>
</li>
<li>English
<ul>
<li>Taylor Swift</li>
<li>Whitness Huston</li>
<li>Micheal Jackson</li>
</ul>
</li>
</ul>
</body>
包含选择器（所有后代）
符号：空格
作用：选中所有儿子孙子元素
示例：
<head>
<style type="text/css">
.music li <!--此处修改为空格后-->
{
border:1px solid red;
}
特殊性
选择器样式的搭配：就近原则 即：内联>嵌入>外部
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，内联样式选择符的权值最高为1000。例如下面的代码：
p{color:red;} /权值为1/
p span{color:green;} /权值为1+1=2/
.warning{color:white;} /权值为10/
p span.warning{color:purple;} /权值为1+1+10=12/
footer .note p{color:yellow;} /权值为100+10+1=111/
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
最高权值：写在样式的分号前：p{color:red!important;} — 此权值高于用户自己设置的样式。