专栏首页Vincent-yuan前端学习(11)~css学习(五):样式表的继承性和层叠性

前端学习(11)~css学习(五):样式表的继承性和层叠性

本文重点

  • CSS的继承性
  • CSS的层叠性
    • 计算权重
    • 权重问题大总结
    • CSS样式表的冲突的总结
  • 权重问题深入
    • 同一个标签,携带了多个类名
    • !important标记

CSS的继承性

我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论:

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

继承性是从自己开始,直到最小的元素。

我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性。于是我们可以得出结论:

  • 关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。
  • 关于盒子、定位、布局的属性,都不能继承。

以后当我们谈到css有哪些特性的时候,我们要首先想到继承性。而且,要知道哪些属性具有继承性、哪些属性没有继承性。

CSS的层叠性

层叠性:计算权重

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

三种选择器同时给P标签增加颜色的属性,但是,文字最终显示的是蓝色,这个时候,就出现了层叠性的情况。

当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重

  • id 选择器
  • 类选择器、属性选择器、伪类选择器
  • 标签选择器、伪元素选择器

因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器

针对上面这句话,我们接下来举一些复杂一点的例子。

层叠性举例

举例1:计算权重

如上图所示,统计各个选择器的数量,优先级高的胜出。文字的颜色为红色。

举例2:权重相同时

上图可以看到,第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后,因此以第二个样式为准(就近原则)。

举例3:具有实战性的例子

现在我要让一个列表实现上面的这种样式:第一个li为红色,剩下的li全部为蓝色。

如果写成下面这种代码是无法实现的:

无法实现的原因很简单,计算一下三个选择器的权重就清楚了,显然第二个样式被第一个样式表覆盖了。

正确的做法是:(非常重要)

上图中,第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果:所有人当中,让某一个人为红,让其他所有人为蓝。

这种方式好用是好用,但用好很难。

就拿上方代码来举例,为了达到这种效果,即为了防止权重不够,比较稳妥的做法是:把第二个样式表照着第一个样式表来写,在此基础上,给第二个样式表再加一个权重。

举例4:继承性造成的影响

如果不能直接选中某个元素,而是通过继承性影响的话,那么权重是0。

为了验证上面这句话,我们来看看下面这样的例子:

另外:如果大家的权重相同,那么就采用就近原则:谁描述的近,听谁的。举例如下:(box3 描述得最近,所以采用 box3 的属性)

上图,因为没有选中p,所以权重为0.

层叠性:权重计算的问题大总结(非常重要)

层叠性。层叠性是一种能力,就是处理冲突的能力。当不同选择器,对一个标签的同一个样式,有不同的值,听谁的?这就是冲突。css有着严格的处理冲突的机制。

通过列举上面几个例子,我们对权重问题做一个总结。

上面这个图非常重要,我们针对这个图做一个文字描述:

  • 选择上了,数权重,(id的数量,类的数量,标签的数量)。如果权重一样,谁写在后面听谁的。
  • 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。

CSS样式表的冲突的总结

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端学习(9)~css学习(三):样式表和选择器

    CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容...

    Vincent-yuan
  • 前端学习(37)~js学习(十四):对象的创建

    第一次看到这种工厂模式时,你可能会觉得陌生。如果简化一下,可以写成下面这种形式,更容易理解:(也就是,利用new Object创建对象)

    Vincent-yuan
  • java之hibernate之组件映射

    1.在开发中,有的类信息比较复杂,而且某几个信息可以组成某一个部分,这个时候可以采用组件映射,组件映射是一张表映射到多个类。表结构

    Vincent-yuan
  • CSS选择器的优先级

    pitaojin
  • 编写灵活、稳定、高质量的CSS代码的规范

    (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。

    WEBING
  • 设计模式(0)—— 概述

    设计模式(Design Pattern),是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

    阳光岛主
  • [转载]Golang 编译成 DLL 文件

    首先撰写 golang 程序 exportgo.go: package main import "C" import "fmt" //export Print...

    李海彬
  • 练习题四

    第1章 练习题 1.1 每天晚上 12 点,打包站点目录/var/www/html 备份到/data 目录下(最好每次备份按时间生成不同的备份包) 1.1.1 ...

    惨绿少年
  • 【晓快讯】超 300 万人预约腾讯「吃鸡」手游 / 阅文在港上市股价飙涨 / 用微信还信用卡将要交手续费

    除此之外,这两天还有许多与腾讯、微信有关的新闻,知晓程序(微信号 zxcx0101)已经帮你总结好了。?

    知晓君
  • 经典设计模式-iOS的实现

    王大锤

扫码关注云+社区

领取腾讯云代金券