CSS继承、层叠和特殊性
1.继承
(1)样式应用于某个特定的HTML标签元素,而且应用于其后代。
(2)但某些标签不适用,如border;
(3)例子:p{color:red;}设置了颜色
<p class="first">
<p id="second">
效果一样。
2.特殊性
(1)当标签匹配多个样式,浏览器根据权值来判断适用哪种CSS样式,权值高就使用哪种。
(2)例子:
p{color:red;}
.first{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
“胆小如鼠”显示的是绿色的字体。
(3)规则:

3.层叠
(1)层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
(2)例子:
p{color:red;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
(3)设置样式层次一致,最后文本显示绿色,后面覆盖了前面的。
4.重要性
(1)为某些样式设置最高权值,使用important解决。
(2)语法:p{color:red!important;}
(3)例子:
p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
(4)原来是绿色覆盖了红色,现在是红色覆盖了绿色,因为红色设置了最高权值。
CSS继承、层叠和特殊性的更多相关文章
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
- HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性
标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...
- CSS中的层叠、特殊性、继承、样式表中的@import
CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...
- css继承和层叠
在前面介绍了如何利用文档结构和css选择器为元素应用各种丰富的样式,今天来好好聊聊css的层叠和继承,先说说概念. 继承:一个元素向其后代元素传递属性值所采用的机制,说的通俗点,就是元素的某些属性可以 ...
- 精通CSS高级Web标准解决方案(1-2 层叠与特殊性)
层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...
- CSS的“层叠”规则的总结
当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...
- 关于css中层叠性的一点理解
关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- CSS继承总结
CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
随机推荐
- JavaScrip:Function函数编程
自定义函数定义 1.函数通过function关键字创建,函数创建格式: function 函数名称([参数,...]){ 代码段; return 返回值; } 注意事项: 函数名称不要包含特殊字符 函 ...
- Android 线程_笔记
多线程 一.为什么要使用多线程 1.提高用户体验或避免ANR 在事件处理代码中需要使用多线程,响应时间超过5s,即会出现ANR(Application is not responding),并因为响应 ...
- Java眼中的XML文件写入
创建DOM方式生成XML文档 DOMTest package com.imooc.domtest.test; import java.io.File; import java.io.IOExcepti ...
- HDU 2502 月之数(二进制,规律)
月之数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- Asp.Net Core Use MongoDB
前几天在网上想找一下Asp.Net Core使用MongoDB相关的文章,也看了几篇,发现都是在写简单的例子,这样的例子是不能用在生产环境的,不能用的生产环境的.封装一个东西一定是建立在你对这个东西足 ...
- 使用setTimeout实现setInterval
setInterval = () =>{ console.log(1) //使用递归 setTimeout(setInterval,1000); }; setInterval()
- [国嵌攻略][060][LCD工作原理解析]
LCD硬件体系 1.LCD液晶屏 液晶属于一种有机化合物,分子形状为长棒状,在不同的电流作用下,分子会有规律旋转,这样对光线产生一定的控制形成一个像素,而很多像素右可以构成完整的图像. LCD是Liq ...
- 使用gitbook 发布一个教程文档网站
gitbook是一个好用的发布电子书的项目:使用gitbook 可以在本地写好文档再远程推送到库:也可以在gitbook提供的在线平台上制作电子书:要想在自己的服务器上使用gitbook 发布一个网站 ...
- 织梦DEDE网站后台如何上传附件
如题,织梦DEDE网站后台如何上传附件?今天本人遇到这样的问题,在网站后台里点击一番后,成功上传了一个pdf文件和doc文件,特来分享经验. 工具/原料 织梦dede网站 doc文件 方法/步骤 1 ...
- 修真院java后端工程师学习课程--任务1(day one)
这是我从学习资料-线下报名-北京报名截取的报名截图,从图中我们可以看出我们的报名对象应该有姓名,qq,修真类型,预计入学时间,毕业院校,线上学号,日报链接,立愿,辅导师兄等属性,其中线上学号是主码. ...