代码编织梦想

在CSS的世界中也存在着权力即CSS权重

1. 概念

CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式 

2. 以前的BUG

在实际开发中,我们常常会遇到样式不生效的问题,百思不得其解,其实这就是CSS的权重在作祟, 下面举个栗子 

    <style>
        #txt{
            color: black;
        }
        p{
            color: aqua;
        }
    </style>
    <body>
        <p id="txt">CSS的权重问题</p>
    </body>

段落为id选择器所赋的黑色如图:

 3. 权重计算

大家都了解二进制如何比较大小吧:0010>0001 。
其权重计算与其类似。

 4.权重的叠加

权重叠加计算的时候就是将叠加的权重都加起来,就像二进制加法一样,但是要记住权重可以发生叠加,但是不能发生进位可以出现 0 0 0 10   但是不能将后面的10进一位

div span {
    /* 0,0,0,2 */
}
p #span_one{
    /* 0,1,0,1 */
}
p{
    /* 0,0,0,1 */
}

浏览器会执行权重最大的样式,这就是选择器的权重
每个选择器都有自己的权重,组合选择器由相加计算得到
且选择器权重不会满十进一:0,1,0,0>0,0,28,0

    <style>
        p {
            color: aqua;
        }
        p #txt{
            color: blue;
        }
        p .txt{
            color: chocolate;
        }
    </style>
    <p id="txt" class="txt">CSS的权重问题</p>
    <p>权重的计算</p>
    <p class="txt">优先渲染权重最大的样式</p>

 结果如图:

 4. 加载顺序

除了权重之外,CSS的渲染规则还有一种即根据css的引入顺序来加载。
同权重的选择器,顺序在后面的最后被加载会覆盖之前的样式

也就是我们平时所说的就近原则,选择靠近结构的那个选择器进行渲染

p{
    color:green;
}
link
link
p{
    color:green;
}

 我们这里改变了两者的顺序,那么我们将会看到顺序最后引入的样式,后面的样式覆盖前面的样式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_68997646/article/details/128755642

css学习笔记_pcz520的博客-爱代码爱编程

CSS学习大纲: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握C

css经典笔记_飘…的博客-爱代码爱编程

# 课程目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种选择器 > 4. 熟练掌握CSS各种选择器 > 5. 熟练掌握CSS三种显示模式 > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性 > 8. 熟练掌握CSS盒子模型 > 9.

前端学习之路---css_胡哥居士的博客-爱代码爱编程_内嵌式是将css代码集中写在html文档的head头部标记中并且使用style标记定义其

CSS学习内容                                                            下一篇        javascript基础(1) 1. 学会使用CSS选择器 2. 熟记CSS样式和外观属性  3. 熟练掌握CSS各种选择器  4. 熟练掌握CSS各种选择器  5. 熟练掌握CSS三种显示模式  

css-爱代码爱编程

内容介绍 CSS选择器CSS样式和外观属性CSS各种选择器CSS各种选择器CSS三种显示模式CSS背景属性CSS三大特性CSS盒子模型CSS浮动 10.CSS定位 11.CSS高级技巧强化CSS CSS

css笔记-爱代码爱编程

课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮

【web前端(二十四)】css详述_silly-boy的博客-爱代码爱编程

CSS的发展历程 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。 CSS 网页的美容师

web前端@css选择器-爱代码爱编程

web前端@css选择器超级详细 文章很长 需耐心阅读 内容总览 内容总览 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟

css01-css2-爱代码爱编程

文章目录 1.CSS简介1.1 CSS的发展历程1.2 CSS 网页的美容师1.3 CSS初识1.4 引入CSS样式表(书写位置)1.4.1 内部样式表1.4.2 行内式(内联样式)1.4.3 外部样式表(外链式)1.4.4 三种样式表总结(位置)1.4.5 CSS样式规则1.5 CSS注释2.开发者工具(chrome)3.选择器(重点)3.1 C

-CSS-笔记--爱代码爱编程

目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展

css学习-爱代码爱编程

课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的

2.css-爱代码爱编程

课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的

二.CSS 2021-02-16-爱代码爱编程

二.CSS 1.基本使用 1.1CSS介绍 1.CSS是什么? CSS 全称 Cascading Style Sheets ,翻译过来就是层叠样式表 如果说HTML是网页的结构,那么CSS就是网页化妆师 2.CSS 写在哪里? CSS 有三种写法 1. 直接写在标签内 2. 写在 style 标签内 3.

【前端——css】:盒子模型、浮动_地球炒蛋725的博客-爱代码爱编程

一、CSS特性 1.CSS特性:优先级 (1) 解决问题:一个标签使用多个选择器,样式冲突的时候,到底谁生效 谁选择的范围广,谁的优先级低——越细越高  例如:  结果:显示为蓝色。 因为标签选择器优先级比继承高。 提升优先级写法: (2)权重叠加计算 谁的个数多,谁的权力大!  注意:按照计算公式的顺序一级一级比较!

web(七)-爱代码爱编程

Bootstrap 概念 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 * 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。 * 好处: 定义了很多的css样式和js

css设置元素内边距(padding)、外边距(margin)-爱代码爱编程

设置元素内边距padding 所有的 HTML 元素基本都是以矩形为基础。 每个 HTML 元素周围的矩形空间由三个重要的属性来控制: padding(内边距) margin(外边距) border(边框) padding

(转)chrome的最小字体12px限制解决办法-爱代码爱编程

相信不少做网站的用户会有这样一个问题,Chrome 默认最小字体是12px(最新版英文也有此问题),这个是 Chrome 为了更好显示中文设计的,但是这样一来就会出现某些上标、下标字体过大,影响用户体验。之前在开发Hybid App的时候也被它困扰了很久,在百度上查了很久,网上所有的解决方案都惊奇地相似,只有下面两种: 1-针对谷歌浏览器加前缀进行适配

css 基础笔记-爱代码爱编程

课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮