美文网首页深入解读JavaScript
CSS中层叠和特殊性

CSS中层叠和特殊性

作者: 悟C | 来源:发表于2019-08-10 16:43 被阅读0次

当同时存在两条甚至多条规则同时选择一个元素的时候，CSS就需要使用层叠的机制来处理这种冲突。

1. 层叠机制的原理

为规则赋予不同的重要程度，层叠机制的重要性级别从高到低如下所示:

  • 标记为！important的用户样式
  • 标记为！important的作者样式
  • 作者样式 （网站开发者所写的样式）
  • 用户样式 (用户通过浏览器的设置选项，为网页应用自己的样式)
  • 浏览器(或者用户代码)的默认样式

在此基础上，规则再按选择符的特殊性排序。

2. 特殊性

为了量化规则的特殊，每条规则都对应着一个数值。这样，一条规则的特殊性就表示为其每个选择符的累加数值。累加是基于位置累加，以保证累加值不大于等于1

任何选择符的特殊性都对应于如下4个级别，a、b、c、d：

  • 行内样式，a为1
  • b等于ID选择符的数目
  • c等于类(class)选择符、伪类选择符及属性选择符的数目
  • d等于类型(type)选择符和伪元素选择符的数目

相关文章

  • CSS 自学笔记（中）

    传送门： CSS 自学笔记（上） CSS 自学笔记（中） CSS 自学笔记（下） 继承、层叠和特殊性 继承 CSS...

  • css继承、层叠和特殊性

    css继承、层叠和特殊性 1、继承css的某些样式具有继承性 那么什么是继承呢？继承是一种规则，它允许样式不仅应用...

  • CSS继承、特殊性和层叠

    1.继承 CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标...

  • CSS中层叠和特殊性

    当同时存在两条甚至多条规则同时选择一个元素的时候，CSS就需要使用层叠的机制来处理这种冲突。 1. 层叠机制的原理...

  • css的继承、层叠和特殊性

    css的继承、层叠和特殊性 继承 css的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定的h...

  • css的继承、层叠和特殊性

    1.css的继承 1-1， p { color: #2f2 } 以上p标签的设置不仅仅应用于p标签，还应用于p...

  • CSS的继承、层叠和特殊性

    一、继承 概念：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且...

  • 初识CSS ②继承、层叠和特殊性

    1、继承 CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于...

  • CSS继承、层叠、特殊性

    1.CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素...

  • CSS 基础

    CSS基础 本文包括CSS基础知识选择器（重要！！！）继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...

网友评论

    本文标题：CSS中层叠和特殊性

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

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    深入解读JavaScript

    关于我们|服务条款|联系我们|CSS中层叠和特殊性|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！