css的核心原理分为优先级原则与继承原则两大部分
2024-08-29 20:29:34
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性
1》优先原则针对选择器:a.同一个选择器从上往下读取执行css样式 b.同一类选择器从上往下执行 c.不同类型的选择器优先级,先执行低优先级再执行高优先级,比方基本选择器就是从*通配符<标签div<class选择器<id选择器 d.外部样式与内部样式合并之后再一起执行,根据从上往下执行顺序读取 e.内联样式也就是行内样式是最后执行的 f.加了!important字段是最后执行的
2》继承原则:2.1跟文字样式相关的可以被继承/其他的不能继承 2.2块级元素的宽度如果不设置会继承父元素的宽度,高度取决于它的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的核心原理分为优先级原则与继承原则两大部分</title>
<!-- 优先原则针对选择器:a.同一个选择器从上往下读取执行css样式
b.同一类选择器从上往下执行 c.不同类型的选择器优先级,先执行低优先级再执行高优先级,比方基本选择器就是从*通配符<标签div<class选择器<id选择器
d.外部样式与内部样式合并之后再一起执行,根据从上往下执行顺序读取 e.内联样式也就是行内样式是最后执行的 f.加了!important字段是最后执行的 -->
<style type="text/css">
div{
/* color:#f90; */
color:#f90 !important;
}
/* div{
color:red;
}
.box1{
color: yellowgreen;
}
#box2{
color: violet;
} */
</style>
<link rel="stylesheet" href="demo2.css"><!--新建demo2.css,文件内容div{color: blue;}-->
</head>
<body>
<!-- <div class="box1" id="box2">我想起那天下午在夕阳下的奔跑,那是我逝去的青春</div> -->
<div style="color: skyblue;">我想起那天下午在夕阳下的奔跑,那是我逝去的青春</div>
</body>
</html>
最新文章
- SqlServer中的更新锁(UPDLOCK)
- Java 死锁诊断 -- 线程转储
- Android Sutido 编译速度优化
- 关于快速排序的Java代码实现
- 浙江大学PAT上机题解析之3-04. 一元多项式的乘法与加法运算
- 【LUOGU???】WD与地图 整体二分 线段树合并
- iOS开发造轮子 | 通用占位图
- iptables(4)规则编写
- android屏蔽系统锁屏的办法
- CF1B Spreadsheets
- Java基础——Oracle(七)
- Discrete Logging ZOJ - 1898 (模板题大小步算法)
- javaScript随机数取值方法
- OSX11.12安装任何来源的软件,在终端中输入
- ArcGIS for android访问天地图
- ip、ifconfig命令与IP(转)
- VS Code使用Git管理代码
- angular.element()的用法
- spring boot 运行提示:Process finished with exit code 1
- HTML文件默认内容
热门文章
- selenium + PhantomJS使用时 PhantomJS报错解决
- python基础面试集锦(51-100)
- 踩坑:windows系统下,nodejs版本管理器无法使用n来管理
- Plant Simulation打包与分享
- C++函数模板详解(一):概念和特性
- VS下解决_CRT_SECURE_NO_WARNINGS 警告
- linux入门系列10--firewalld防火墙管理
- 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法
- 机器学习(ML)十三之批量归一化、RESNET、Densenet
- 如何在kalilinux上安装docker