一、CSS引入、基础选择器、权重计算

一、前言

1、主流浏览器及其内核

前端打交道最多的是浏览器

ie -- 内核 trident

firfox -- 内核 gecko

geogle --  内核 webkit/blink

safari  -- 内核 webkit

opera -- 内核 presto

2、CSS 基础选择器
1、标签选择器
2、类选择器（上面点声明，下面class调用）
3、属性选择器 
4、ID 选择器 （唯一值）
5、* 通配符选择器

3、复合选择器
1、后代选择器（空格隔开）包含所有后代意思 （常见）
2、子代选择器 （大于号隔开）（指的是亲儿子不包括所有后代）
3、分组选择器 （常见）
在样式表中有很多具有相同样式的元素。例如:
h1{color:red;}
h2{color:red;}
p{color:red;}
为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分割。例如上述我们可以写成:
h1,h2,p {
color:red;
}
4、嵌套选择器
在下面例子设置了三个样式:
p{} 为所有p元素指定一个样式
.marked{} 为所有class="marked" 的元素指定一个样式。
.marked p{} 为所有class="marked" 元素内的p元素指定一个样式。
p.marked{} 为所有class="marked"的p元素指定一个样式。

5、相邻兄弟选择器 （以加号分隔） //相邻兄弟选择器可选择“紧接在另一元素后“的元素，且两者有相同父元素。
6、普通兄弟选择器 （以破折号分隔） //选取所有指定元素之后的相邻兄弟元素。

7、伪类选择器（冒号开头） 

二、显示模式 （display）
1、块级元素 block （每个块级元素独自占据一行或多整行，可以对其设置宽度、高度、对齐等属性，常用与网页布局和网页结构的搭建）
常见的块级元素有：<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
块级元素特点：
（1）总是从新行开始
（2）高度、行高、内边距以及外边距都可以控制
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素

2、行内元素（inline）
行内元素（内联元素）（不占据独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式）
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素
内联元素特点：
（1）和相邻内联元素在一行上
（2）高度、宽度无法设置、水平方向的padding和margin可以设置，垂直方向的无效
（3）宽度默认是它本身内容的宽度
（4）内联元素只能容纳文本或则其他内联元素 （a特殊 a可以包裹块级元素）

注意：
1、文字类块级标签如<p> <h1>-<h6>，里面不能放其他块级元素
2、链接里面不能再放链接

3、凡是带有inline的元素，都有文字特性

3、行内块元素 （inline-block）
在行内元素中有几个特殊的标签<img>、<input>、<td>,可以对他们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
行内块元素特点：
（1）和相邻内联元素（行内块）在一行上，但是之间会有空白缝隙
（2）默认宽度就是它本身内容的宽度
（3）高度、行高、外边距以及内边距都可以控制

三、CSS三大特性 （层叠、继承、优先级）

 

1、多重样式优先级
内联样式>内部样式>外部样式>浏览器默认样式

优先级逐级增加的选择器列表：
1、通用选择器（0000）
2、元素选择器（0001）
3、类选择器（0010）
4、属性选择器（0010）
5、ID选择器（0100）
6、内联样式（1000）
!important 规则例外 

所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
后代选择符： .father .child{}
子选择符： .father > .child{}
相邻选择符: .bro1 + .bro2{}

权重计算：
内联样式（1000）+ (ID 选择器)（100） + （类选择器）（10）+ （元素选择器）（1）
权重可以叠加的
比如：
div ul li (0003)
.nav ul li (0012)
a:hover (0011)
.nav a (0011)
#nav p (0101)
注意：(继承权重为0)

---

总结：

CSS优先级法则：
A选择器都有一个权值，权值越大越优先；
B当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式；
D 继承的Css样式后来指定样式
E 在同一组属性设置中标有“！important”规则的优先级最大；

CSS样式优先规则1: 最近的祖先样式比其他祖先样式优先级高
CSS样式优先规则2: "直接样式"比"祖先样式"优先级高
CSS样式优先规则3:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），
计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下
一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。