今日小结

2018-07-13

1.优先级（权值）

4个等级的定义如下：（这是查到的）

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

上图中.first和p比较起来，.first权值高，所以自然CSS显示为.first的属性。

而有时候会出现权值相同的时候，如图（1）所示。

1

当权值相同时，处于后面的CSS样式被应用，即此时“血缘法”适用,哪个靠近文本内容执行哪条语句。如果权值低的和权值高的同时出现，想应用权值低的，则可以用以下语法。比如：

①p{color:red!important;}

.first{color:green;}

当权值一样时依然适用

②p{color:red!important;}

p{color:pink;}

tip:important优先级最高

2.继承

这幅图中子元素为span标签，相对应的，父元素为p标签。所以当p{color:red;}出现时，“<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>”,这一整句自然为红色。和“p,span{color:red;}”的效果是一样的，但是当CSS样式中出现

“p span{color:green;}”则和“1”中的权值有关，这一句中的“胆小如鼠“显示效果为绿色，别的则为红色。只要这条语句放在<style>中，无论哪个位置都会实现该效果。

3.about"p span{color:pink;}/p>span{color:pink;}"

①p>span{color:pink;}中">"表示子选择器。②p span{color:pink;}为包含（后代）选择器

>作用于元素的第一代后代，空格作用于元素的所有后代；也就是说>的指定性强，而空格是较为方便。如果语句为*{color:pink;}则为所有标签元素字体为粉色。

如果语句为p,span{color:red;}则和

p{color:red;}

span{color:red;}

或者p{color:red;}三种写法表达效果是一样的。（此条语句前提条件：span为p的子元素)