前端-CSS-5-继承性&层叠性&权重比较
1、继承性
<style type="text/css">
.father{
font-size: 30px;
background-color: green;
}
.child{
color: purple;
}
</style>
</head>
<body>
<!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素
像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
-->
<div class="father" id="egon">
<div class="child">
<p>alex</p>
</div>
</div>
<p>小马哥</p>
</body>
2、层叠性
总结：
1.先看标签元素（实际显示的内容）有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
<style type="text/css">
/*<!-- */
/*层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了*/
/*权重： 谁的权重大，浏览器就会显示谁的属性*/
/**/
/*谁的权重大？ 非常简单 数数*/
/**/
/*id的数量 class的数量 标签的数量*/
/*-->*/
#box{
color: red;
}
.container{
color: yellow;
}
p{
color: #2aabd2;
}
</style>
-------------------------------------------------------------------------
/*id的数量 class的数量 标签的数量*/
3、！important
<!-- ！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素 -->
不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的。
<style type="text/css">
p{
color: red !important;
font-size: 30px;
}
.spe1{
color: yellow ;
font-size: 40px;
}
.spe2{
color: green;
font-size: 40px;
} ul{
color: red;
}
.list{
color: purple !important;
}
</style>
选择器的优先级
前端-CSS-5-继承性&层叠性&权重比较的更多相关文章
- 前端----css的继承性和层叠性
css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color , font ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS继承性+层叠性+盒子+浮动
CSS继承性+层叠性+盒子+浮动 CSS继承性 <style> div{ color: pink; font-siz ...
- python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809
---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...
- css中的层叠性及权重的比较
假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...
- CSS---选择器种类 | 层叠性权重
一.css选择器种类 1.1,ID选择器 1.2,类选择器 1.3,标签选择器 1.4,后代选择器 1.5,子代选择器 1.6,交集选择器 1.7,并集选择器 1.8,通配符选择器 1.9,属性选择器 ...
- 前端 CSS的继承性
css有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 记住:有一些属性是可以继承下来 : color . font-*. text- ...
- css 权重值(层叠性)详解
目录 css权重值(重叠性)实例 权重值的计算 !important 提升权重值实例 什么情况下可以使用!important ? 总结: css权重值(重叠性)实例 css中有很多选择器,那在多个选择 ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
随机推荐
- leetcode -day30 Reverse Linked List II
1. Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one- ...
- TensorFlow笔记-05-反向传播,搭建神经网络的八股
TensorFlow笔记-05-反向传播,搭建神经网络的八股 反向传播 反向传播: 训练模型参数,在所有参数上用梯度下降,使用神经网络模型在训练数据上的损失函数最小 损失函数:(loss) 计算得到的 ...
- stty(set tty)
tty [ -a ] [ -g ] [ Options ] stty(set tty)命令用于显示和修改当前注册的终端的属性. UNIX系统为键盘的输入和终端的输出提供了重要的控制手段,可以通过s ...
- Spring boot 使用的注解有哪些？
Spring boot 使用的注解有哪些? 注解 作用 @SpringBootApplication 等价于 @Configuration + @EnableAutoConfiguration + @ ...
- Ionic Tabs使用
1. 创建Tabs相关页面 ionic g page tabs ionic g page TabOne ionic g page TabTwo ionic g page TabThree 2. 在ta ...
- vmware 安装 ios 苹果系统
我用的系统是win10... 一.所需软件: 1.下载并安装VMware Workstation Pro 12 密码:7ybc和序列号 密码是:bwm0 2.下载unlocker 203(for OS ...
- 【python】class之类的内建函数
- Python 中的变量
Python采用基于值得内存管理模式,赋值语句的执行过程是:首先把等号右侧标识的表达式计算出来,然后在内存中找一个位置把值存放进去,最后创建变量并指向这个内存地址.Python中的变量并不直接存储值, ...
- LwIP raw api下使用tcp keep alive
// The following code is implemented after tcp_new() or in tcp_connected call back... xxx_connected( ...
- 小峰servlet/jsp（6）jstl核心标签库
一.引入jstl 需要jstl.jar;standard.jar; 二.jstl核心标签库: c:out 内容输出标签; c:set 用来设置4种属性范围值的标签: c:re ...