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之间