CSS样式层叠

简介: CSS样式层叠

CSS在HTML中共三种使用方式:

  1. 行内样式
  2. 内嵌样式
  3. 外部样式

详见 CSS在HTML中的使用


CSS选择器最常用的也是三种:

  1. id选择器       #id值
  2. 类选择器      .class名
  3. 标签选择器   p标签名

倘若三种使用方式或三种选择器同时给P标签添加了不同的颜色样式,那最终究竟显示哪种样式呢?

  • 使用方式相同时,样式权重为   id选择器 > 类选择器 > 标签选择器

  • 选择器相同时,样式权重为   内嵌样式 > 外部样式

首先比较样式权重,样式权重高的样式会覆盖样式权重低的样式,最终显示权重最高的样式。

当样式权重相同时,写在后面的样式会覆盖写在前面的样式,最终显示写在最后的样式!

 

最终样式的确定流程

  1. 筛选出选中该元素的样式
  2. 在选中该元素的样式中,是否存在带 !important 后缀的样式,若存在,则会显示该样式,若没有,继续下一步
  3. 是否存在行内样式,若存在,则会显示行内样式,若没有,继续下一步
  4. 数一下样式选择器上一共有多少个id选择器,id选择器最多的权重最高,将显示该选择器里的样式,若id选择器数量相同,继续下一步
  5. 数一下样式选择器上一共有多少个类选择器(含属性选择器,伪类选择器),类选择器最多的权重最高,将显示该选择器里的样式,若类选择器数量相同,继续下一步
  6. 数一下样式选择器上一共有多少个标签选择器(含伪元素选择器),标签选择器最多的权重最高,将显示该选择器里的样式,若标签选择器数量相同,则显示写在最后的样式

CSS样式定义建议

统一使用外部样式,避免使用!important和id选择器,对指定标签有统一的指定样式时,才使用标签选择器。

 

CSS样式层叠自测题

目录
相关文章
|
1天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
4天前
|
前端开发
css定制样式
【7月更文挑战第1天】css定制样式
9 2
|
2天前
|
Web App开发 前端开发
设计,兼容性----字体-------Css样式的字体,字体样式导入
设计,兼容性----字体-------Css样式的字体,字体样式导入
|
2天前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
2天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
10 0
|
3天前
|
前端开发 JavaScript
【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案
【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案
6 0
|
3天前
|
前端开发
前端 CSS 经典:水波进度样式
前端 CSS 经典:水波进度样式
6 0
|
3天前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
7 0
|
6天前
|
前端开发
CSS外部样式
CSS外部样式
9 0
|
前端开发 JavaScript 算法
【前端第三课】选择器类型的使用方法;CSS层叠与继承;盒子模型的概念;背景和边框
【前端第三课】选择器类型的使用方法;CSS层叠与继承;盒子模型的概念;背景和边框
【前端第三课】选择器类型的使用方法;CSS层叠与继承;盒子模型的概念;背景和边框