学习《HTML+CSS基础课程》里的权值

学习课程,里面讲到了标签的权值,我认为有必要记录一下,因为新学者容易弄混,现将原文摘抄如下,温故知新吧.

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{color:red;}

.first{color:green;}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

转载于:https://blog.51cto.com/maihao703/1751517

学习《HTML+CSS基础课程》里的权值相关推荐

Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
CSS基础（6）- 属性值的计算过程
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录属性值的计算过程参考资料属性值的计算过程一个元素一个元素依次渲染,顺序则是按照页面文 ...
南大软院大神养成计划--HTML和CSS基础课程（二）
学习小结今天主要学习了关于CSS样式的一些基本知识.CSS全称为"层叠样式表(Cascading Style Sheets)",它主要用于定义HTML内容在浏览器内的显示样式,如 ...
我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础选择器半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
思维导图学习法金融学基础课程思维导图分享
这是我本人总结的思维导图学习法,我将其用于五门金融学基础课程的学习,受益颇多,在此进行分享 MAC和IOS用户推荐下载MindNode 链接下载:https://pan.baidu.com/s/1qO ...
深度学习基础（三）—— 权值矩阵的初始化
权值矩阵初始化的方式与激励函数的类型有关: 对于隐层 ii: tanh\tanh 型激励函数对称区间上的均匀分布:[−6fanin+fanout−−−−−−−−−√,6fanin+fanout−− ...
一、HTML和CSS基础--HTML+CSS基础课程--第1部分
第一章 HTML介绍 Html和CSS的关系 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比 ...

学习《HTML+CSS基础课程》里的权值

特殊性

学习《HTML+CSS基础课程》里的权值相关推荐

最新文章

热门文章