<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元素 背景色变成红色
CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
HTML
CSS
执行效果：
b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
HTML
CSS
执行效果：
c.元素选择器：通过note节点名称匹配元素。
HTML
CSS
2.属性选择器：
注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。
CSS3新增了一些属性选择器，待持续更新。
3.组合选择器
示例如下：
实现效果如下：
示例如下：
从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
参考：
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器
