1.CSS选择器的规范
规范了页面中哪些元素能够使用定义好的演示
目的：匹配页面元素
2.最基础的选择器--通用选择器
语法: *{}
作用：
匹配页面中的所有元素
ex:
*{
font-size:12px;
}
注意：尽量少用，因为不好匹配元素的具体样式
3.元素选择器
语法：
由元素名称作为选择器
作用：
控制某元素的默认样式
ex
/*页面中所有的div 颜色为 红色*/
div{
color:red;
}
/*页面中所有的h1 字体大小为12px*/
h1{
font-size:12px;
}
4.类选择器（使用频率极高）
语法：.类选择器名称{}
作用：
负责定义样式，可以由任意一个元素灵活引用。
注意：
类选择器名称不能以数字开头
ex:
.redColor{
color:red;
}
引用类选择器：由元素的class属性进行引用
<ANY class="类选择器名称"></ANY>
注意：
引用时，需加 .
多类选择器的引用方式
允许一个元素同时引用多个 类选择器，那么该元素也同时具备多个选择器定义的效果。
引用时，多个选择器，用
空格隔开即可
ex:
<div class="类名1 类名2 类名3"></div>
分类选择器：
可以
将 类选择器和元素选择器结合起来使用，以实现对某种元素中不同样式的细分控制
语法：元素选择器.类选择器{}
ex:
p.redColor{} : 定义class 为 redColor 的p元素的样式
div.bigFont{} : 定义class为bigFont的div的元素样式
5.id选择器（使用频率极高）
语法：#id值{ ... }
作用：与元素id联用，定义指定ID值的元素的样式，专属定制
<ANY id="id选择器名称"></ANY>
注意：
引用时，需加#
#important{
color:red;
}
定义 id为 important 的元素的样式 ， 文本颜色为 红色
重要：
id选择器可以应用在a标签锚点、表单控件label关联、JS引用等....
6.群组选择器
语法：选择器1,选择器2,选择器3,...{}
作用：
以逗号隔开的选择器列表,将一些相同的规则用于多个元素中
ex:
#important,.redColor,span{
color:red;
background-color:black;
}
id为important和class为redColor以及所有的span元素，样式为 红色的字，黑色的背景
7.后代选择器
后代：
具备层级关系的元素，被嵌套的都可以称之为后代
语法：选择器1 选择器2{}
作用：依据元素在其位置上的上下文关系来定义样式，也称之“包含选择器”，用于选择作为某元素的后代元素
注意：
层级关系之间用空格隔开
ex ：
div p{}
匹配 所有div 中的 p元素
#d1 p span{}
匹配 id为d1的元素中 的p元素中的 span元素
8.子代选择器
子代：只具备一级的层级关系，被嵌套的元素称之为 子代
要求：选择器之间只能存在父子关系
语法：选择器1>选择器2{}
ex:
#d1>p{}
匹配 id为d1的元素中的下一级子级元素p
#d1>p>span{}
匹配 id为d1的元素中下一级p元素中下一级的span元素
注意：
子代选择器的目的不是匹配任意后代元素，而是希望缩小范围，只选择某个元素的子元素
9.伪类选择器
1、作用
为了匹配元素不同的状态。
2、语法
使用 :声明选择器:伪类选择器{}
3、分类
1、链接伪类
1、:link : 适用于尚未访问的超链接
2、:visited : 适用于访问过的超链接
2、动态伪类
1、:hover : 适用于悬停在HTML元素时
2、:active : 适用于HTML元素被激活时
3、:focus : 适用于HTML元素获取焦点时
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
4、
使用最多的方式
元素的 样式设置 配合着 :hover 一起使用
html:
<a href="http://www.baidu.com" id="a1">百度</a>
css:
#a1:link{
color:red;
}
尚未访问a标签时，显示红色
#a1:visited{
color:green;
}
访问过a标签后，显示绿色
#a1:hover{
font-size:20px;
color:blue;
}
当鼠标移动到a标签上面时，字体大小变成20px,颜色变成蓝色
10.复杂选择器
复杂选择器分类：
1、兄弟选择器
1、什么是兄弟选择器
通过元素的位置关系来匹配元素的
位置关系：
具备相同父元素，同级关系的元素
特点：
只能向后找，不能向前找
2、
2.1 ：相邻兄弟选择器
相邻：后一个
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
语法：选择器1+选择器2
2.2 ：通用兄弟选择器
用于匹配 某元素后面的所有兄弟元素
语法：选择器1~选择器2
语义：匹配 选择器1 后面 所有满足选择器2的 兄弟元素
2、属性选择器
1、什么是属性选择器
<div id="d1" class="c1"></div>
允许使用 元素所附带的属性及其值，来匹配页面的元素
ex:
1、获取页面上所有 class 为 c1 的元素
2、获取页面上所有 附带 id属性的 元素
2、语法
1、[attribute]
attribute:属性
语义：匹配页面上所有附带 attribute 属性的元素
ex:
1、[id]
匹配页面上所有附带 id 属性的元素
2、[class]
匹配页面上所有附带 class 属性的元素
2、elem[attribute]
elem:元素
attribute:属性
语义：匹配页面上所有附带 attribute 属性的 elem 元素
ex:
1、div[id]
匹配页面上所有附带 id 属性的 div 元素
2、div[id][class]
匹配页面上所有 即具备id属性，同时又具备class 属性的 div元素
3、elem[attribute=value]
语义：匹配 页面中 所有 attribute 属性的值为 value 的elem元素
ex
1、div[id=d1]
== #d1
2、p[class='redBack']
== p.redBack
3、input[type="text"]
匹配页面中所有的单行文本框
4、匹配页面中所有的禁用元素
[disabled]
5、匹配页面中所有的复选框
input[type="checkbox"]
或
[type="checkbox"]
4、elem[class~=value]
class的多类引用方式
<div class="redBack important weight"></div>
语义：class 属性值 为值列表，并且value是这个列表中的一个独立单词
ex:
1、div[class~=important]
匹配页面上所有的div ，并且class 值列表中 包含 important 这个独立单词的 元素
5、elem[attribute^=value]
^= : 以value作为开始
语义：匹配页面中 attribute属性值是以value作为开始的elem元素
1、div[class^=back]
匹配页面中 class属性值是以back作为开始的div元素
6、elem[attribute*=value]
语义：匹配页面中 attribute属性值中包含value字符的elem元素
1、div[class*="or"]
匹配页面中 class舒心值中包含or字符的div元素
<div class="important"></div>
<div class="visitor"></div>
<div class="zero"></div>无法匹配
2、div[class*="o"]
7、elem[attribute$=value]
语义：匹配页面中 attribute属性值中以value字符作为结尾的elem元素
记住：
^= , *= , $=
3、伪类选择器
1、目标伪类
1 、what
突出显示活动HTML锚点
2、语法
:target
2、元素状态伪类
元素状态：启用，禁用，被选中的
多数用于 表达元素中，被选中的状态 用户 单选按钮和复选框中
1、:enabled
匹配每个已启用元素
2、:disabled
匹配每个被禁用元素
3、:checked
匹配每个被选中的元素(radio，checkbox)
3、结构伪类
1、:first-child
匹配 属于其父元素中的首个子元素
2、:last-child
匹配 属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配 属于其父元素中的第n个子元素
:nth-child(5)
4、:empty
匹配没有子元素的每个元素
5、:only-child
匹配属于其父元素中的唯一子元素
4、否定伪类
:not(选择器)
将 满足 指定选择器的元素 排除出去
4、伪元素选择器
伪类：匹配页面的元素
伪元素：匹配页面元素中的内容
1、:first-letter 或 ::first-letter
匹配 某元素的 首字符
2、:first-line 或 ::first-line
匹配 某元素的 首行
3、::selection
匹配 被用户选取的部分
: :CSS3之前的版本中使用的
:: :CSS3中，伪元素选择器的表现形式
推荐使用 :first-letter 替代 ::first-letter
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
