<style>ul li{
color: red } </style>
<ul>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
</ul> li是ul的孙子级别
<ul>
<p><li>我是ul里面的li</li></p>
<p><li>我是ul里面的li</li></p>
<p><li>我是ul里面的li</li></p>
</ul> li是ul的孙子级别
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入，空格可以多 但是不可以插入其他的符号以免造成干扰。 li 被 ul包裹的情况下 颜色变红
2.子选择器：E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
<style>div span{
color: red }
h2 >span{ color: green} </style>
<div>
<p><span>早上好</span></p>
<p><h1><span>我是标题</span></h1></p>
<h2><span>晚上好</span></h2>
</div>
div元素中包裹的子元素span 显示为红色，h2元素中包裹的子元素span显示为绿色，>左右可以添加空格
3.相邻选择器： E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
<style>.main+p{
background: green} </style>
<div> <p>我是谁</p>
<p class="main">我是谁</p>
<p>我是谁</p> </div>
类选择器main相邻的下一个p背景色变绿
4.通用选择器：E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
<style> .ab~p{
background: red} </style>
<div> <p class="ab">111</p>
<p>222</p>
<p >333</p>
<p>444</p>
<p>555</p> </div>
类选择器ab下面的所有p标签都会变成红色
1.E[attr]属性选择器： E[attr] 选择匹配具有属性attr的E元素
<style> dd[class]{
background: red} </style>
<dl> <dt>汽车</dt>
<dd>宝马</dd>
<dd class>奔驰</dd>
<dd>奥迪</dd> </dl>
[ ]表示属性的意思 里面写具体属性的名称比如 [id]
2.E[attr=val]属性选择器:E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
<style> dd[class=two]{
background: red } </style>
<dl> <dt>标题</dt>
<dd class="one">我是定义列表1</dd>
<dd class="one">我是定义列表1</dd>
<dd class="two">我是定义列表2</dd> </dl>
E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中,dd元素中class的值为two的背景颜色变成红色
3.E[attr*=val]属性选择器: 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”
dd[class=two]{<style>p[class*=b]
属性后面的值加不加引号（包括单引号和双引号）都可以 当时遇到特殊符号需要加引号
background: red } </style>
<div> <p >111</p>
<p class="b1">222</p>
<p class="b2">333</p> </div>
p元素中class的值只要包含b的背景色都会变成红色,
4.E[attr^=val]属性选择器:E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
<style> a[href^='http://']{
background:red } </style>
在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下
<a href="http://www.baidu.com">跳转百度</a>
<a href="www.baidu.com">不能跳转百度</a>
表示 属性href是以http开头的a元素 背景色变成红色
5.E[attr$=val]属性选择器:E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
a[href^='http://']{<style>a[href$=".cm"]
background:red } </style>
在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下
<a href="http://www.baidu.com">能跳百度</a>
<a href="http://www.baidu.cn">因为百度把.cm的域名也买了所以也能跳了</a>
表示 属性href是以cn结尾的a元素 背景色变成红色
会有影响的#header .a选中的也包括#header .top a{}选中的，就比如说你爷爷的孙子，可能包括你也包括你堂兄弟，而如果说你爷爷的大儿子的儿子，可能就会筛选掉一部分了
<div id="header">
<a href="">111111</a>
<div class="top">
<a href="">22222</a>
</div>
</div>
以上这个例子
#header .a会选中2个a，而#header .top a{}只会选中1个a
#header .top a{}优先级高
