CSS --- 选择器类型 / 优先权 /继承

选择器优先

1、ID　		#id
2、class类　.class
3、标签　　	p
4、通用　　	*
5、属性　　	[type="text"]
6、伪类　　	：hover
7、伪元素　　::first-line
8、子选择器、相邻选择器

1.优先级

!important > 内联样式 1000 > ID 0100> class|属性 0010> 标签 0001> 通用 0000

2.权重计算

序号	选择器	权值
1	内联样式，如: style=””，	1000
2	ID，如：#content，	0100
3	类，伪类和属性选择器，如.content，:hover和[type=“text”]	0010
4	类型选择器，伪元素选择器，如div p，::first-line	0001
5	通配符、子选择器、相邻选择器等的，如*、>、+,	0000
6	继承的样式	没有权值

选择器类型

1. 基本选择器

选择器 类型	功能描述
* 通配选择器	选择文档中所有HTML元素
E 元素选择器	选择指定类型的HTML元素
#id ID选择器	选择指定ID属性值为“id”的任意类型元素
.class 类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN 群组选择器	将每一个选择器匹配的元素集合并

2. 层次选择器语法

关系选择器 类型	功能描述
e f 包含选择器	e元素包含的f元素
e>f父子选择器	e元素包含的子元素 f元素
e+f 相邻选择器	e元素后所有的f元素
e~f 兄弟选择器	e后面所有的兄弟元素f

3. 动态伪类选择器语法

选择器 类型	功能描述
e:link 链接伪类选择器	访问前
e:hover 链接伪类选择器	鼠标悬停时。IE6及以下浏览器仅支持a:hover
e:active 用户行为选择器	点击激活状态，常用于链接描点和按钮上
e:visited 用户行为选择器	访问后
e:focus 用户行为选择器	获取焦点时

a:hover{ 
background-color: #ff0c27;
color: white;
}鼠标悬停超链接时背景色+字体白色

4. 目标伪类选择器

选择器 类型	功能描述
E:target	选择匹配E的所有元素，且匹配元素被相关URL指向

5. UI元素状态伪类选择器语法

选择器 类型	功能描述
e:checked 选中状态伪类选择器	选中状态 （只针对单选按钮和复选框）
e:enabled 启用状态伪类选择器启用状态伪类选择器	可编辑状态 （默认状态）
e:disabled不可用状态伪类选择器	禁用状态

6. 结构伪类选择器使用语法

选择器 类型	功能描述
e：root	根选择器 在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
e:first-child	父元素的第一个子元素的元素E。与E:nth-child(1)等同
e:last-child	父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
e:only-child	父元素只包含一个子元素e
e:nth-child(n)	父元素E的第n个子元素F 其中n可以是整数、even，odd、公式（2n+1）,而且n值起始值为1，而不是0.
e:nth-last-child(n)	倒数第n个子元素e
e:first-of-type	父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
e:last-of-type	父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
e:only-of-type	父元素只包含一个同类型子元素e
e:nth-of-type（n）	父元素内具有指定类型的第n个E元素
e:nth-last-of-type(n)	倒数第n个同类型元素e
e:empty	没有子元素的元素，而且该元素也不包含任何文本节点

7. 否定伪类选择器

选择器 类型	功能描述
E:not(F)	除元素F外的E元素

8. 属性选择器语法

选择器 类型	功能描述
e[attr]	带有指定属性attr的元素
e[attr=“value”]	带有指定属性attr和值的元素
[attribute~=value]	选取属性值中包含指定词汇value的元素
e[attr!=“value”]	包含空格及value的e元素
e[attr^=“value”]	以value开头的e
e[attr$=“value”]	以value结尾的e
有[attr*=“value”]	attr中包含value的e标签

e[attr |=“value”] 以value开头且有分隔符-的e元素

input[type="submit"] {}
p[class|="a"]{background:blue}  /*<p class="a-b">小兰兰</p>*/
 a[href$="doc"]::after{            content:"url(i/word.jpg)"        }

9. 伪对象选择器

选择器 类型	功能描述
e:first-letter	第一个字符
e:first-line	第一行
e:before	前
e:after	后
e::selection	选中状态时触发的效果