基本选择器
通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
子元素选择器
div > span //div元素里面的span元素
//子选择器只能选择某元素的子元素
相邻兄弟元素选择器
#aa + #bb //aa元素 相邻后面的 bb元素（单选）
//相邻兄弟选择器可以选择，紧接在另一元素后的元素，而且他们具有一个相同的父元素
通用兄弟选择器
section ~ article //section元素后面的所有 article兄弟元素（多选）
//选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
群组选择器
div,span,p,... //各个元素一起选择
//群组选择器是将具有 相同样式 的元素分组在一起，每个元素选择器之间使用 逗号 隔开
属性选择器
a [href] //a标签中带有href属性的，选上
span [id="aa"] //span的ID类，必须只有一个id名，并且id="aa"
div [class~="bb"] //div的classname，classname可以有多个类名，并且 bb类名前后 必须有空格
article [class^="c"] //article的classname，必须只有一个类名，并且以“c”开头
section [class$="d"] //section的classname，必须只有一个类名，并且以“d”结尾
nav [class*="e"] //nav的classname，可以有多个类名，并且类名带有“e”
aside [class|="f"] //aside的classname，必须只有一个类名，并且类名以 f 或 f- 开头的元素
伪类选择器
动态伪类：这些伪类不存在HTML中，只有当用户和网站交互的时候才能体现出来
锚点伪类： :link 、:visited
用户行为伪类： :hover 、:active 、:focus
a{ text-decoration: none; }
a:link { color: black; }/*鼠标原始链接为黑色；*/
a:hover { color:white; }/*鼠标经过时为白色；*/
a:active { color: red; }/*鼠标点击下去为红色；*/
a:visited {color: purple;}/*鼠标访问过后为紫色；*/
input:focus { background:blue; }/*鼠标进入文本输入框时变成蓝色背景*/
UI元素状态伪类
UI元素状态伪类： :enabled 、:disabled 、 :checked (Opera专用)
input:enabled{ border: 1px solid red; } //选中可输入状态的input，并设置样式
input:disabled{ background: blue; } //选中不可输入状态的input，并设置样式
//默认input输入框都是 :enabled 的状态；
CSS3结构类
ul > li : first-child { }//ul元素下的li的第一个 ul > li : last-child { }//ul元素下的li的最后一个 ul > li : nth-child(3) { }//ul元素下的li的第3个 Element : nth-child(2n+1)//每隔一行选择一次（多选） Element : nth-child(3n+1)//每隔两行选择一次（多选） Element : nth-child(odd)//每奇数行选择一次（多选） Element : nth-child(even)//每偶数行选择一次（多选） Element : nth-last-child(n) // 所匹配属性的倒数第n个（单选）
//指定元素类型 div (Element) : nth-of-type(2) //所有父级元素（包括body）下的第二个元素，并且还是div（可多选） div (Element) : nth-last-of-type(2) //所有父级元素（包括body）下的倒数第二个元素，并且还是div（可多选） Element : first-of-type 选择器匹配 属于其父元素 的特定类型的 首个子元素 的每个元素 Element : last-of-type 选择器匹配 属于其父元素 的特定类型的 最后一个子元素 的每个元素 Element : only-child 选择器匹配 属于其父元素下 的唯一子元素 的每个元素 （Element是其父元素下的唯一一个子元素，不可以再有其他元素） Element : only-of-type 选择器匹配 属于其 父元素的 特定类型的 唯一子元素的每个元素（Element是其父元素下的唯一特定类型的子元素，不过还可以有其他类型的元素） Element : empty 选择器匹配没有子元素（包括文本节点）的每个元素（如<div></div>，这样的空元素）
否定选择器
nav:not(div) { border-right : 1px; } //表示nav里面的div，不需要这些样式
CSS权重规则
1.包含更高权重选择器的一条规则拥有更高的权重。
2.ID选择器的权重比属性选择器高
3.带有上下文关系的选择器比单纯的元素选择器权重要高。
4.与元素挨得近的规则生效,htm中规则的比CSS文件的优先。
5.最后定义的这条规则会覆盖上面与之冲突的规则。
6.无论多少个元素组成的选择器,都没有一个cass选择器权重高。
7.通配符选择器也有权重,权重被认为是O。
慎用 !important
行内样式 > id选择器 > 类，伪类和属性选择器 > 元素和伪元素选择器
伪元素
div::first-line //div的第一行，first-line伪元素只能用于块级元素
div::first-letter //div文本的首字母，first-letter伪元素只能用于块级元素
div::before{ content : "在div的前面出现，内容输入用content"; color:red; }
特点1：永远是div里面的第一个子元素（<div> ::before <p>这是第二个子元素</p> </div>）
特点2：默认是行级元素（可以更改成块级元素）
特点3：文本内容是通过content写入
特点4：标签中找不到对应的标签
div::after{ content : "在div的后面出现，内容输入用content"; color:red; }
跟before有同样的特点
div::selection { background:black;color:white; }， //div选中文本时，样式变成黑底白字；Firefox浏览器要加-moz
清除浮动常用
清除浮动用：div::after { display:block;content:"";clear:both; }
1、清除浮动必须转换为块级元素
2、无内容的话浏览器会默认不显示，实现不了清除浮动的效果，必须插入空内容
3、最后就clear:both;