1，基础选择器

基础选择器由单个选择器组成

1.1标签选择器

语法：标签名{ 属性：属性值 }
特点：根据标签名称作为选择器
作用：可以选择一类标签，如<dir><p><span>等，能够快速为页面中同类标签统一设置样式。

1.2类选择器

语法：.类名{ 属性：属性值 }
特点：单独选一个或多个标签
优点：谁用谁调用，开发最常用，支持多类名。

1.3 id选择器

语法：#id名{ 属性：属性值 }
特点：只能调用一次

1.4通配符选择器

语法： *{ 属性：属性名 }
特点：对所有标签，同意设置样式

2，复合选择器

由基本选择器组合而成

2.1后代选择器（包含选择器） ※

特点：可以选择父元素里面的子元素
eg：ol li { 属性：属性值 }

2.2子选择器（子元素选择器）

特点：只能选择某元素的最近一级子元素（亲儿子）
eg：.nav > a {属性：属性值 }

2.3并集选择器 ※

特点：可以选择多组标签，同时为他们定义相同的样式，常用于集体声明。
语法：元素1，元素2 {属性：属性值 }

2.4伪类选择器

特点：用于向某些选择器添加特定的效果

2.4.1连接伪类

    a:link 选择所有未被访问的连接
    a:visited 选择所有已被访问的连接
    a:hover 选择鼠标指针位于其上的连接
    a:active 选择活动连接（鼠标按下但未弹起的连接）

开发常用例：
a{color:#333;text-decoration:none}
a:hover{color:#369;text-decoration:uncerline;}

注意：<body>样式设计时，不包含<a>，所以<a>标签需要单独指定样式

2.4.2 focus选择器

特点：选取焦点元素
eg ：input:focus{background-color:yellow;}

3,CSS3新增选择器

3.1属性选择器

语法：标签名[属性] { CSS样式 }

eg1 ：input[value]{color:pink;}
⇒<input type="text" value="用户名" />
<input type="text" />

eg2 ：input[type=text]{color:pink;}
⇒<input type="text" name="" id="" />
<input type="password" name="" id="" />

注意：[属性]：①属性名需存在；②属性值（type=text）；③以val开头（att^=“val”）；④以val结尾（att$="val"）；⑤含val（att*="val"）※

3.2结构伪类选择器

常用于根据父类元素选择子类元素

・第一个子元素： ul li:first-child{}                ul li:first-of-type{}
・最后一个子元素：ul li:last-child{}                 ul li:last-of-type{}
・任何一个子元素：ul li:nth-child(2){}
・偶数子元素： ul li:nth-child(even){}
・奇数子元素： ul li:nth-child(odd){}
・所有子元素： ul li:nth-child(n){}
・公式：2n,2n+1,5n,n+5,-n+5(前五个)             ul li:nth-of-type(n){}

注意：nth-child选择器，先排号再找类型。nth-of-type选择器，先找类型再排号。

3.3伪元素选择器

语法：element::before{}
eg ：div::before{content:'我'}
div::after{content:'小猪佩奇'}
<div>是</div>
输出：我是小猪佩奇
特点：利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
::before选择器：在元素内部的前面插入内容
::after选择器：在元素内部的后面插入内容
注意：
    ・创建的元素属于行内元素
    ・创建的元素在文档树中找不到（F12），所以称为伪元素
    ・before,after必须有content属性
    ・before在父元素内容的前面创建元素，after在后面
    ・伪元素选择器和标签元素选择器一样，权重为1
使用场景：
1）连接图标两侧图标 >
2）与鼠标经过一同搭配使用，xx:hover::before{}
3）清除浮动 .clearfix:after{}

一选择器