基础选择器
一、通用选择器(了解)
1、作用
匹配页面上所有的元素
2、语法
*{样式声明;}
3、注意
效率低，尽量不用
尽可能通过 继承性 去代替通用选择器的效果
二、元素选择器
又名：标签选择器，标记选择器
1、作用
匹配页面某一指定元素
比如：
页面所有的 div 元素
页面所有的 p 元素
2、语法
元素{}
ex:
h1{color:red;}
h2{color:blue;}
三、类选择器(重点)
1、作用
允许元素使用附带的class属性值，对选择器进行引用
2、语法
以 . 作为开始
.类名{}
类名：字母，数字，_,-组成,不能以数字开始
引用类选择器:通过元素的 class 属性，进行引用
<ANY class=”类名”></ANY>
3、特殊用法-分类选择器
设置class值为redColor的p元素的 背景颜色为 Yellow
1、作用
将 元素选择器和类选择器结合到一起，从而实现对某种元素的不同样式的细分控制
2、语法
元素选择器.类选择器{
样式声明;
}
p.redColor{
background-color:yellow;
}
4、特殊引用-多类选择器
1、作用
可以让一个元素同时引用多个类选择器,中间用空格分开即可
四、id选择器(重点)
1、作用
只匹配指定ID值得元素
2、语法
#id值{}
五、群组选择器
1 、作用
选择器声明以逗号来隔开的选择器列表.其目的是为了声明一组选择器中的公共样式
2、语法
选择器1,选择器2,选择器3,..,{
}
ex：
设置页面上所有的p元素，span元素，id为d1元素，class为redColor的元素的文本颜色 为 红色
p,span,#d1,.redColor{
color:red;
}
等同于
p{color:red;}
span{color:red;}
#d1{color:red;}
.redColor{color:red;}
六、后代选择器
1 、作用
用于匹配某元素的后代元素时使用
2、语法
选择器1 选择器2{
}
七、子代选择器
1、作用
用于匹配某元素的子代元素
2、语法
选择器1>选择器2{
}
八
、伪类选择器
1、作用
为了匹配元素不同的状态的
2、语法
:伪类选择器{}
3、分类
①、链接伪类
:link :匹配 超链接 未被访问时的状态
:visited :匹配 超链接 被访问过的状态
②、动态伪类
:hover :匹配鼠标悬停在 html 元素时的状态
:active : 匹配 html元素 被激活时的状态
:focus : 匹配html元素获取焦点时的状态(文本框与密码框)
③、目标伪类
④、元素状态伪类
⑤、结构伪类
⑥、否定伪类复杂选择器
复杂选择器
一、兄弟选择器
1、作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2、分类
1、相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻：紧紧挨在指定元素的后面
语法：
选择器1+选择器2
ex:
1、div+p{}
2、#content+.important{}
2、通用兄弟选择器
通用：某元素后面所有的兄弟元素
语法：
选择器1~选择器2
二、属性选择器
1、作用
允许使用元素所附带的属性及其值，来匹配页面的元素
2、语法
唯一一组以 [] 来进行表示的选择器
1、[attr]
attr:任意属性名称
作用：匹配 附带 attr 属性的元素
ex:
1、[id]
匹配页面所有附带 id 属性的元素
2、elem[attr]
elem : 表示任意元素
作用：匹配附带 attr 属性的 elem 元素
ex:
1、p[id]
3、elem[attr1][attr2]
作用：匹配页面中所有即附带attr1属性也同时附带attr2属性的elem元素
ex:
div[id][class]
4、elem[attr=value]
value:值
作用：匹配页面上 附带attr属性同时值为 value 的elem 元素
ex:
input[type=text] : 获取页面所有文本框
5、elem[class~=value]
作用：匹配 附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立 值。
6、elem[attr^=value]
^= : 以 value 作为开始
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
7、elem[attr$=value]
$= : 以 value 作为结束
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
8、elem[attr*=value]
*= : 包含 value 字符即可
三、伪类选择器
1、目标伪类
1、作用
突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。
2、语法
:target
2、元素状态伪类
1、作用
元素状态 ：启用，禁用，被选中(checked)
2、语法
:enabled , 匹配每个已启用元素(表单控件)
:disabled , 匹配每个已禁用元素(表单控件)
:checked , 匹配每个被选中元素(radio,checkbox)
3、结构伪类(重点)
1、:first-child
匹配 属于其父元素中的首个子元素
2、:last-child
匹配 属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配 属于其父元素中的第n个子元素
4、:empty
匹配 没有子元素(包含文本)的每个元素
<div></div>
5、:only-child
匹配属于其父元素中的唯一子元素
<div>
<p>Hello World</p>
</div>
4、否定伪类
1、语法
:not(选择器)
作用：将 满足选择器的元素从指定范围中排除出去
四、伪元素选择器
1、作用
伪类：匹配元素的
伪元素：匹配元素中的内容
2、语法
1、:first-letter 或 ::first-letter
匹配 指定元素的 首字符
2、:first-line 或 ::first-line
匹配 指定元素的 首行
3、::selection
匹配 被用户选取的部分
3、: 和 ::的区别
CSS3之前，所有的伪元素选择器，全部都是 使用 :，ex :first-line,:first-letter
CSS3中，将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line
为了能够实现浏览器的兼容性，比较推荐使用 :的写法