HTML5+CSS3 学习笔记 05

HTML5+CSS3 学习笔记 05

视频资源：​​127-135

CSS三大特性

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则

遵循就近原则，哪个样式距离结构近，就执行哪个样式。样式不冲突，不会层叠。

# pink距离div近，则颜色为pink。

# 我要飞翔颜色为pink，字体大小为12px。

1.2 继承性

子标签会继承父标签的某些样式，比如字体和颜色。简化代码，降低CSS复杂性。

某些样式：text-,font-,line-开头的元素，以及color属性。

# 我要飞翔颜色为plum，字体大小为12px。

行高的继承

我要飞翔

#12px/24px 24px是指行高，div/p行高都是24px。

我要飞翔

#行高的另一种写法

我要飞翔

• 没有指定文字大小

1.3优先级

当同一个元素指定多个选择器，就会有优先级产生。

选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行。

不管父元素权重有多高，子元素选择器权重为0。

div { color: red;}.test { color: pink;}

# 颜色为purple，ID选择器权重更高

# 颜色为black，style选择器权重更高

# 颜色为red，!important权重最高

1.3 优先级

选中叠加（权重虽叠加，但不会进位。10次叠加为10，不会进位。）

/* 复合选择器有权限叠加的问题 *//* url li权重0,0,0,1 + 0,0,0,1 = 0,0,0,2 */url li { color: black;}/* li的权重是0,0,0,1, */li { color: red;}

#尽管 li距离标签更接近，但是权重不高，最终颜色为black。

/* 复合选择器有权限叠加的问题 *//* url li权重0,0,0,1 + 0,0,0,1 = 0,0,0,2 */url li { color: black;}/* li的权重是0,0,0,1, */li { color: red;}/* .nav li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */.nav li { color: blue;}

#类选择器的权重更高，最终颜色为blue。

权重练习题

.nav { color: blue;}li { color: red;}

#最终文字为red，.nav权重虽高，但是li继承之后父元素权重为0，子元素定义的颜色将其覆盖。

/* .nav li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */.nav li { color: blue;}/* pink权重 0,0,1,0 */.pink { color: pink;}

#Jim颜色为blue。

/* .nav li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */.nav li { color: blue;}/* .nav pink权重 0,0,1,0 + 0,0,1,0 = 0,0,2,0 */.nav .pink { color: pink;}

#Jim颜色为pink。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。