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一直到能独立完成 ...
随机推荐
- Django-常用模板标签及过滤器
常用模板标签及过滤器 标签和过滤器完整介绍 https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 模板的组成 HTML代码+ 逻 ...
- 【转载】wifi一键配网smartconfig原理及应用
物联网给我们又提供了一种窃取WiFi密码的好方式:让智能设备主动断线. 同时也提供一种让智能设备连接到恶意WiFi的方式:设备一键配置功能时疯狂广播恶意WiFi的信息. 转自:http://blog. ...
- Elastic FileBeat 快速入门
背景 用过ELK(Elasticsearch, Logstash, Kibana)的人应该都面临过同样的问题,Logstash虽然功能强大:支持许多的input/output plugin.强大的fi ...
- 【HTML_标签大全】
HTML标签大全 标签 描述 标签类型 备注 <!--...--> 定义注释 / 单标签 <!DOCTYPE> 定义文档类型 / 单标签 <head></he ...
- deeplearning.ai 人工智能行业大师访谈 Pieter Abbeel 听课笔记
1. Pieter Abbeel小时候想做一个篮球运动员 - -!上学的时候喜欢数学和物理,上大学之后很自然的学工程.Pieter定义工程问题是"解决实际中应用物理和数学的问题". ...
- HDU 2296:Ring
Problem Description For the hope of a forever love, Steven is planning to send a ring to Jane with a ...
- NYoj289苹果(0-1背包)
苹果 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 ctest有n个苹果,要将它放入容量为v的背包.给出第i个苹果的大小和价钱,求出能放入背包的苹果的总价钱最大值. 输 ...
- Win10没有以太网图标如何找回?以太网适配器不见了怎么恢复?
Win10以太网适配器不见了怎么恢复?以太网其实就是Win7系统中常说的"本地连接"假若用户发现网络适配器中的以太网适配器图标不见了,可以在设备管理器中添加一些这类适配器,具体过程 ...
- HTTP协议----->连接管理
1. TCP连接 1.1 TCP为HTTP提供了一条可靠的比特传输管道. TCP(Transmission Control Protocol)----传输控制协议,是主机对主机层的传输控制协议,提 ...
- DEDE中 field:rel 是什么意思,起一个什么样的作用效果
DEDE中 field:rel 是什么意思,起一个什么样的作用效果 这是一段调用导航栏目的代码 {dede:channel type='top' row='10' } [field:typename/ ...