本文共 3830 字，大约阅读时间需要 12 分钟。

目录

[TOC]

CSS选择器用于规范页面中哪些元素能够使用定义好的样式。

基础选择器

作用：用于匹配页面中的元素。

1. 通用选择器##

作用：匹配页面中所有的元素。语法：*{样式声明}

*{   box-sizing:border-box;  }

2. 元素选择器##

最基本选择器，又称为标签选择器，标记选择器,类型选择器。由元素名称作为选择器，规范当前标记样式。语法：由元素名称作为选择器

span{   display:inline-block;  }

3. 类选择器##

作用：通过标签所附带的class属性值对选择器进行引用。特点：一段公共的样式，谁想用，谁就可以引用。语法：.类名{样式声明}

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
.myStyle{    height:30px;    line-height:30px; }

4. ID选择器##

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。语法：#ID{样式声明}

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
#p1{    color:red; }

5. 群组选择器##

作用：定义一组选择器的公共样式，选择器之间用逗号隔开。语法：div,p,#d1,p.myStyle,.myf{样式声明}

form,div,body,img,p,img,dl,dt,dd,h2,h1,h3,h4,h5,h6{ 	 margin:0px; padding:0px; border:0; }

6. 后代选择器##

作用：依托于后代关系，匹配页面的元素。后代：一级以及多余一级的父子关系。语法：选择器1 选择器2{样式声明}  ----  匹配子代元素，可多级	 选择器1>选择器2{样式声明}  ----  匹配子代元素，仅一级

#id div{ 	 margin-left:30px;}

高级选择器

前面讲的基础选择器往往并不能满足我们项目开发中的所有问题，这时候就需要用到下面这些复杂的选择器。

1. 兄弟选择器##

作用：通过元素间的 *平级* 关系来匹配页面元素。注意：兄弟选择器只能向后找，不能向前找语法：1、相邻兄弟选择器：紧紧跟随		选择器1+选择器2{样式声明}	 2、通用兄弟选择器：匹配某元素后面的所有兄弟元素		选择器1~选择器2{样式声明}

#list li+li{ 	 border-left:1px solid #999;}

2. 属性选择器##

作用：允许使用元素所附带的属性及其值来匹配页面元素。注意：兄弟选择器只能向后找，不能向前找语法：唯一一组以 [] 进行表示的选择器	1、[attr]：表示某一具体属性名称	2、elem[attr]：表示页面某一具体元素	3、[attr1][attr2]：匹配 即附带attr1属性，同时也附带attr2属性的 页面元素	4、[attr=value]：匹配页面中附带attr属性并且值为value的页面元素	5、[class~=value]：匹配页面中附带class属性的元素	6、[attr^=value]：匹配页面中附带attr属性，并且值是以value字符作为开始的元素	7、[attr*=value]：匹配页面中附带attr属性，并且值中包含value字符的页面元素	8、[attr$=value]：匹配页面中附带attr属性，并且值是以value字符作为结尾的页面元素

div[class^='lv1']{ 	 padding-left:10px;}

3. 伪类选择器##

作用：允许使用元素所附带的属性及其值来匹配页面元素。

1、目标伪类

作用：用于突出显示活动的HTML锚元素语法：:target

div:target{ 	 background-color:#0f0}

2、元素状态伪类

作用：匹配已启用、被禁用、被选中的状态的元素，多数用在表单控件元素中。语法：1、:enabled,匹配每个已启用元素	 2、:disabled,匹配每个被禁用的元素	 3、:checked,匹配每个被选中元素(radio,checkbox)

3、结构伪类

1、:first-child：匹配属于其父元素中的首个子元素2、:last-child：匹配属于其父元素中的最后一个子元素3、:nth-child(n)：匹配属于其父元素中的第n个子元素	取值：n/odd/even/2n/2n+1 (even偶数=2n,odd奇数=2n+1)4、:empty：匹配没有子元素的每个元素（空格也属于子元素）5、:only-child：匹配属于其父元素的唯一子元素

4、否定伪类

作用：将满足选择器的元素排除出去语法：:not(选择器)

table td:not(:first-child){	color:red;}

5.链接伪类

:link 匹配尚未访问的超级链接:visited 匹配访问过的超级链接

6.动态伪类

:hover 匹配鼠标悬停在元素上的状态:active 匹配元素被激活时的状态:focus 匹配元素获取焦点时的状态

4. 伪元素选择器##

作用：伪类：匹配的是元素。	 伪元素：匹配的是元素中的内容，而不是完整的元素。如：首字符，首行。语法：1、:before 或 ::before		匹配到 元素内容区域之前	 2、:after 或 ::after		匹配到 元素内容区域之后	 3、:first-letter 或 ::first-letter		匹配 指定元素的 首字符	 4、:first-line 或 ::first-line		匹配 指定元素的 首行	 5、::selection（只能::）（火狐不支持）		用于匹配用户选取的部分

/* 谷歌浏览器下滚动条样式设置，因兼容性差异，ie及Firfox等浏览器请自行百度 */*::-webkit-scrollbar{    width: 4px;    height: 4px;    background-color: transparent;}*::-webkit-scrollbar-track{    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);    border-radius: 2px;    background-color: transparent;}*::-webkit-scrollbar-thumb{    width: 4px;    height: 4px;    border-radius: 2px;    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);    background-color: #0083DF;}*::-webkit-scrollbar-corner{ 	background-color: #0083DF; 	border-radius: 2px; }

注意：:与::的区别

':'在css2中使用，即能表示伪类选择器，也能表示伪元素选择器

'::'主要在css3中使用，只表示伪元素选择器，伪类选择器依然使用 : 来表示

为了兼容性，尽可能使用 ‘:’ 来代替 ‘::’

优先级问题

CSS的选择器是有权重的，当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。权重（即优先级）的规则是，权重越高，优先级越高。

同一个元素可以使用多个规则来指定它的同一样式（比如字体颜色），每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的优先级最高。

很多人仅仅知道选择器优先级：ID>class>元素选择器，而不知道ID的优先级为什么大于class的优先级。那么css优先级到底是怎么计算的呢？我们用数字来表示：

内联样式表的权值：1000， id选择器的权值：100 calss | 伪类 | 属性选择器的权值：10， 标签 | 伪元素选择器的权值：1

通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0，即p a与p > a权值一样

#div .title{/* 权值 = 100 + 10 = 110 */	font-size:18px;}#div p.title{/* 权值 = 100 + 1 + 10 = 111 */	font-size:18px;}

除此之外，css中有一个!important属性可以调整优先级，如果用权值表示的话，可以把它看作是无穷大。

#div .title{	font-size:18px !important;}

我们知道HTML文件加载样式的时候有三种方法：内联样式、内部样式、外部样式。内联样式是将样式定义在元素的style属性中；内部样式是将样式定义在html头元素中；外部样式是将样式定义在外部的CSS文件中，在html页面中进行引入。根据就近原则，当样式冲突时，内联样式的权值最高（1000），其次是外部样式表和内部样式表（由选择器计算权值），而浏览器缺省设置则最低。

当权值相同时，根据就近原则，内部样式 > 外部样式

资源链接：