<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元素 背景色变成红色
1、代表内联样式，如:style=””，权值为1000。
2、代表ID选择器，如：#content，权值为100。
3、代表类，伪类和属性选择器，如.content，权值为10。
4、代表类型(元素)选择器和伪元素选择器，如divp，权值为1。
按照CSS代码的执行先后顺序。如果有重复的规则，按照后执行的定义。最终规则是多个定义规则的综合。重点：高级规则定义对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)一页中的多种超级链接样式定义。多个相同规则不同对象的CSS共同定义。对于同一对象定义的多种CSS方式考虑哪种更科学。
css3选择器如下：
一、通配符选择器（*）
通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。
二、元素选择器（E）
元素选择器，是css选择器中最常见而且最基本的选择器。
三、类选择器（.className）
类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名
四、id选择器（#ID）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）,
五、后代选择器（E F）
后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E
F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。
六、子元素选择器（E>F）
子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E >F，其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器（E + F）
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。
