CSS选择器

传统CSS2.1选择器

1. 标签选择器和id选择器

//标签选择器"覆盖面"非常大，所以 通常用于标签的初始化
span{
    
}
//id的名称只能由字母、数字、下划线、短横构成，不能以数字开头，字母区分大小写，习惯上用小写字母 同一个页面上不能有相同的id标签
#div{
    
}

2. class选择器

//多个标签可以使用相同的类名 
.warning{
    
}
//同一个标签可以同时属于多个类 类名用空格隔开
<p class="warning spec">我是段落</p>

##原子类
//在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类 方便调用
.fs14{
    font-size:14px;
}
.fs18{
    font-size:18px;
}
.color-red{
    color:red;
}

3. 复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	空格隔开，选择类名为box的标签内的类名为spec的标签
交集选择器	li.spec	直接连接， 选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	逗号连接， 选择所有ul和ol标签

.box .spec{
    color:red;
}

<div class="box">
	<p class="spec">被选中</p>
	<p class="spec">被选中</p>
	<div>
		<p class="spec">被选中</p>
	</div>
</box>

4. 伪类

伪类	意义
a:link	没有被访问的超链接
a:visited	已经被访问过的超链接
a:hover	正被鼠标悬停的超链接
a:active	被激活的超链接（鼠标按下没有松开时的状态）

6. a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效 LOVE HATE -------link visited hover active

CSS3新增选择器

1. 元素关系选择器

名称	举例	意义
子选择器	div>p	div的直接子标签p
相邻兄弟选择器	img+p	img后面紧跟着的一个p标签
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

3. 序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类型子元素
:nth-last-child(3)	倒数第3个子元素
:nth-last-of-type(3)	倒数第3个某类型子元素

5. 属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=“故宫”]	选择alt属性是故宫的img标签
img[alt^=“北京”]	选择alt属性以北京开头的img标签
img[alt$=“夜景”]	选择alt属性以夜景结尾的img标签
img[alt*=“美”]	选择alt属性包含美字的img标签
img[alt~=“手机拍摄”]	选择alt属性中有空格隔开的手机拍摄字样的img标签
img[alt|=“参赛作品”]	选择alt属性以“参赛作品-”开头的img标签

7. CSS3新增伪类

伪类	意义
:empty	选择空标签（空格不算空标签）
:focus	选择当前获得焦点的表单元素（input)
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前被勾选的单选按钮或复选框
:root	选择根元素，即标签 通常用来设置网页默认字体大小

9. 伪元素

伪元素	意义
::before	创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容
::after	最后一个子元素，必须设置content
::selection	应用于文档被用户高亮的部分（使用鼠标圈选的部分）
::first-letter	选中某元素中（必须是块元素）第一行的第一个字母
::first-line	选中某元素中（必须是块元素）第一行全部文字