美文网首页
CSS的继承性和层叠性

CSS的继承性和层叠性

作者: 锦雯书 | 来源:发表于2017-04-30 18:02 被阅读0次

·继承性

有一些属性,当给自己设置样式的时候,自己的后代也都继承上了,这就是继承性。

哪些属性能继承?

color、text-开头的、line-开头的、font-开头的。

这些关于文字属性的都能继承,继承性是从自己开始,直到最小的元素。

·层叠性

(很多公司如果要笔试,一定会考层叠性)

层叠性:就是CSS的处理冲突的能力。所有的权重计算,没有任何兼容问题!


图1

当选择器选择上了某个元素的时候,那么要统计权重,统计方式是:

id选择器数量,类选择器的数量,标签选择器的数量

图2

选择器实际上能进位(255个标签等于1个类标签),但是没有实战意义。如图3:

图3

如果权重一样,那么以后出现的为准,如图4:

图4

如果不能直接选中某个元素,通过继承性来影响样式的话,那么权重是0,没有意义。

图5

如果大家的权重都是0,则遵从就近原则:谁描述的近,样式就根据谁的变化。

图6

权重问题总结:

1、先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。以大的为准;如果权重一样,则以后面的为准。

2、如果没有选中,则权重为0。如果大家都是0,则遵从“就近原则”

!important标记

图6

important是英语里面的“重要的”的意思。我们可以通过语法:
k:v !important;

来给一个属性提高权重。这个属性的权重就是无穷大。

一定要注意语法:

正确的:font-size:60px !important;

注意:不能把!important写在分号外面;

不能忘记写感叹号。

!important需要强调3点:

1、!important提升的是一个属性,而不是一个选择器。

2、!important无法提升继承的权重,该是0还是0。

3、!important不影响就近原则。

权重计算的总结:

图7

相关文章

  • CSS三大特性

    CSS全称 Cascading StyleSheet层叠样式表 继承性 层叠性 优先级 继承性 1.什么是继承性?...

  • css的三大特性

    css层叠性 css继承性 css优先性 1.css层叠性 所谓层叠性是指多种CSS样式的叠加。 如果一个属性通过...

  • 2.CSS特性-CSS进阶

    二、CSS特性 CSS具有两大特性:继承性层叠性 1.继承性 CSS的继承性,指的是子元素继承父元素的某些样式属性...

  • 第二章 CSS基础

    Cascading Style Sheet —— 层叠样式表 Css的特性 层叠性 继承性 重要性、 Css基本规...

  • css继承性和层叠性

    1.继承性 首先我们要明白一点,并不是所有的属性都能继承。那么,究竟哪些属性可以继承呢?很简单,color、tex...

  • 2022-02-03 CSS第三天

    CSS的三大特性 层叠性 继承性 行高的继承性 优先级 权重练习小例子

  • CSS 三大特性

    CSS的三个特性是指层叠性、继承性以及优先级。 一、CSS层叠性 说明层叠性是多种CSS样式的叠加,是浏览器处理样...

  • CSS特性 & CSS优先级算法

    CSS特性 层叠性 继承性 优先级 CSS层叠性 在css样式中,与样式的调用顺序无关,与样式的定义顺序有关。 层...

  • 前端学习笔记七

    Css层叠样式表: 1,Css层叠性:指多种css样式的叠加 2,Css继承性:子标签会继承父标签的某些样式。 字...

  • 这周的学习

    九 . CSS 的三大特性 CSS 有三个非常重要的特性 :层叠性,继承性,优先级。 1 . 层叠性 ...

网友评论

      本文标题:CSS的继承性和层叠性

      本文链接:https://www.haomeiwen.com/subject/gtrxtxtx.html