CSS工作原理及选择符

一、CSS工作原理

1、层叠

浏览器默认样式表
用户样式表
作者链接样式表
作者嵌入样式表
作者行内样式表

2、计算方法

(1) 找到应用给每个元素和属性的所有声明
(2) 按照顺序和权重排序：增加权重的方法——空格+!important
(3) 按照特制度排序：
特制度计算ID—类—元素名

二、CSS规则

P{color:red;}
(1) 多个声明之间使用分号隔开
(2) 多个选择符之间使用逗号隔开
(3) 组合的选择符之间使用空格隔开

三、CSS选择符

1、上下文选择符

(1) 指定祖先
标签1 标签2{声明}
特殊的上下文选择符：子选择符——标签1>标签2
(2) 同胞选择符
紧邻的同胞选择符+：标签1+标签2
一般通报选择符～：标签1～标签2
(3) 通配选择符
*：选择所有
p * a：选择p下除去子元素的a标签
P *：选择P下的所有元素

2、ID和类选择符

类

(1) 类选择符：.类名
(2) 标签带类选择符： p.specialtext(选取带有该类的段落)
(3) 再添加选择符：p.specialtext span(带有该类的段落下的span)
(4) 多类选择符：.specialtext .featured

ID

(1) ID属性：#ID
(2) 用于页面导航的ID
<a href="#bio">表示该链接的目标在当前页面中；
如果没有#，该链接将会加载bio目录下的默认页面；
如果只有#，该链接将会返回至页面顶部。

3、属性选择符

(1) 标签名[属性名]
img[title]
(2) 标签名[属性名=“属性值”]
img[title=”redflower”]

4、伪类

(1) UI伪类
a. 链接伪类 link visited hover active
b. focus
c. taget
(2) 结构化伪类
first-child last-child nth-child(3). 一类元素的哪一个元素

5、伪元素

css3中伪元素使用::来表示，伪类使用:来表示
first-letter first-line before after. 一个元素的某一个部分

四、样式继承

字体和文本的样式可以继承，宽度和边距等元素不能继承。

五、声明的规则

1、文本值

2、数字值

(1) 绝对值 px
(2) 相对值 Ex Em(Em相对于字母M的宽度 Ex相对于字母X的高度)

3、颜色值

(1) 颜色名
(2) 16进制颜色：#开头，两两同时可以简写。
(3) rgb(0,255,0)或百分比的形式
(4) HSL(0,0%,0%)
(5) Alpha通道：1完全不透明 0完全透明

css3中的rgba
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间