CSS系统学习笔记

简介: 权重主要分为 4 个等级: 第一等:代表内联样式,如: style="",权值为1000 第二等:代表ID选择器,如:#content,权值为100 第三等:代表类,伪类和属性选择器,如.content,权值为10 第四等:代表类型选择器和伪元素选择器,如div p,权值为1 遵循如下法则: 选择.

权重主要分为 4 个等级:

  • 第一等:代表内联样式,如: style="",权值为1000
  • 第二等:代表ID选择器,如:#content,权值为100
  • 第三等:代表类,伪类和属性选择器,如.content,权值为10
  • 第四等:代表类型选择器和伪元素选择器,如div p,权值为1

遵循如下法则:

  • 选择器都有一个权值,权值越大越优先;
  • 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  • 创作者的规则高于浏览者:即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式;
  • 继承的 CSS 样式不如后来指定的 CSS 样式;
  • 在同一组属性设置中标有!important规则的优先级最大

未完待续

目录
相关文章
|
6月前
|
前端开发
一个方便的小系统,用于 CSS 中的动画入口
一个方便的小系统,用于 CSS 中的动画入口
|
6月前
|
Java 项目管理 数据库
基于springboot电子招投标系统(分前后台管理springboot+mybatis+maven+html+css)
基于springboot电子招投标系统(分前后台管理springboot+mybatis+maven+html+css)
195 0
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
67 1
|
3月前
|
前端开发
HTML+CSS 速成10分钟!一键实现你的后台管理系统首页梦想!
HTML+CSS 速成10分钟!一键实现你的后台管理系统首页梦想!
|
3月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
35 0
|
4月前
|
前端开发 JavaScript
【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案
【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案
36 0
|
6月前
|
Java BI 数据库
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
|
6月前
|
人工智能 前端开发
CSS学习笔记2024最新
CSS学习笔记2024最新
39 1