CSS结构与层叠

最新推荐文章于 2024-01-25 13:45:34 发布

叶世琛

最新推荐文章于 2024-01-25 13:45:34 发布

阅读量364

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sec_ye/article/details/53307477

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阅读《CSS权威指南第3版》第3章结构与层叠

做简要笔记

由于一个html元素会同时被多个选择器选中

并且CSS选择器具有继承的特性

因此一个元素经常会有多个相同的属性冲突

如何决定最终使用哪个属性

那么就要引入选择器的 特殊性 概念

特殊性及每个选择器选中元素的方法的重要性

用4个数字来衡量，如0,0,0,0

截图均来自《CSS权威指南第三版》

特殊性的特例或使用规则：

1.以元素属性方式选择ID的属性值加0,0,1,0

2.通配符*的属性值为0,0,0,0

3.属性值为0比没有属性值大

4.内联占第一位，即1,0,0,0（CSS2中style属性声明出现在文档样式表的最后）

5.特殊性值相等，按后出现的为重要

6.!important的规则权重要大于没有!important标志的规则；

有!important标志之间进行比较，没有!important标志之间进行比较

7.!important比内联大

若有不同来源（及创作人员、读者、用户代理）

简单说就是，

没有!important的情况下若读者样式的重要性与创作人员样式的重要性相同，则使用创作人员的；

有!important的情况下使用读者的。

推荐链接样式顺序LVHA(link-visited-hover-active)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叶世琛

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS结构和层叠

ck1n9的博客

12-03

831

结构和层叠CSS层叠样式表，当对于某个属性的值存在冲突时，用户代理需要确定具体使用哪个值作为最终的显示结果，用户代理需要考虑特殊性、重要性、继承。特殊性CSS选择器的特殊性由选择器本身的组件确定，特殊性值可以表述为4个部分。初始值即为 0 0 0 0 ，每一位有不同的含义，对于选择器中给定的ID选择器，值加 0 1 0 0 对于选择器中给定各个类属性值，属性选择，或者伪类，值加 0 0 1 0 对

CSS页面布局基础4——元素可见性、溢出和元素重叠问题

whh4122的专栏

10-16

2748

1、设置元素的可见性：在CSS中，有两个属性可以控制元素的显示和隐藏，就是display和visibility属性。 display属性确定一个元素是否应该显示在页面上，以及如何显示。取值有none，block，inline。当设置元素的display为none时，元素在页面隐藏起来，不仅元素看不见，而且元素也将推出当前的页面布局，不占用任何空间。当设置元素的display为block(

参与评论您还未登录，请先登录后发表或查看评论

CSS 结构和层叠

DanielChen的博客

07-24

148

特殊性选择器的特殊性高低由选择器本身的组成决定，特殊性高的会胜出，采用其申明的方式render. 选择器特权重计算方式： ID：加 0，1，0，0 类，属性：加 0，0，1，0 元素，伪元素：加 0，0，0，1 结合符和通配符：0，0，0，0 如选择器是多个组合，需要求和。求和时不需要进位，位数高的比位数低的大。（0，0，1，0 大于0，0，0，101） example： ...

{{CSS}}结构和层叠

dowhathowtodo

08-19

252

每个合法的文档都会生成一个文档树，从而能根据元素的祖先，属性，兄弟元素等创建选择器来选择元素。有了这个结构树，选择器才能起作用，这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源，这个过程称为层叠。 1.特殊性每个选择器都有特殊性，对于每个规则，用户代理会计算选择...

CSS层叠样式表

surx123456的博客

01-25

1940

目标：CSS，CSS基础选择器，设置字体样式，文本样式，CSS三种引入方式，使用Chorme调试工具调试样式CSS是层叠样式表（Cascading Style Sheets）简称,有时会称为CSS样式表或级联样式表，CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS规则由两个主要的部分构成：选择器以及一条或多条声明。格式例如p{

CSS--层叠样式表

weixin_45398401的博客

08-23

1234

注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）

css层叠

JerryQuery的博客

11-27

599

css层叠概念层叠是CSS的一个基本特征，就是浏览器对多个样式来源进行叠加，最终确定结果的过程. 例子1：三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。选择器排序优先级 ID选择器 > 类选择器 > 标签选择器例子2：计算权重统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。例子3：权重相同时就近原则：第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后。例子4：让一个列表实现如

css的层叠样式

D2961953033的博客

11-26

4279

1 css的层叠样式有四种：行内样式内嵌样式外链样式导入样式 1.1行内样式行内样式又叫做标签样式，它是在标签里面加上style属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css...

详解CSS的结构与层叠以及格式化

09-24

【CSS的结构与层叠以及格式化】在CSS（Cascading Style Sheets）中，结构、层叠和格式化是理解CSS布局的关键概念。首先，我们来看一下它们各自的概念： **结构** 每个HTML或XML文档都有一个结构树，它描述了文档...

深入理解CSS定位与层叠

09-24

CSS定位与层叠是网页布局中非常核心的技术，它允许开发者精确控制HTML元素在页面上的位置，通过不同类型的定位（静态定位、相对定位、绝对定位和固定定位），以及层叠上下文（z-index）来实现复杂的设计需求。...

HTML基础与层叠样式单CSS课件

06-21

HTML基础知识点涵盖了HTML文档的基本结构、头元素、标题标记、主体元素标记、页面背景颜色与图像设置、HEAD头元素的属性、HTML的常用标记等，而层叠样式单CSS知识点则涵盖了CSS的特点、CSS选择符的定义及使用方法、...

将CSS按照层叠式结构化重新组织与构建

12-09

『Styleneat』CSS 文件结构格式重新组织服务，可以将书写风格凌乱的 CSS 文件按照层叠式结构重新组建，方便您进行阅读和研究，十分实用的一个在线工具。编程风格就如人的性格一般，不同程序员（设计师）的书写风格...

2023-04-06-项目笔记 - 第二百六十一阶段 - 4.4.2.259全局变量的作用域-259 -2025.09.19

最新发布

09-19

2023-04-06-项目笔记-第二百六十一阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.259局变量的作用域_259- 2024-09-19

采用Spring+Struts2+Hibernate框架，实现一个仿天猫购物网站的web工程(毕设&课设&实训&大作业&竞赛&项

09-19

项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。

人工智能赋能数据中心的绿色节能策略

09-19

本文阐述了人工智能在数据中心节能应用领域的理论与实践，通过介绍机器学习和基于物理机理模型的人工智能节能技术的应用情况，展示了如何利用AI技术来提升数据中心能源效率，减少PUE。并指出基于大数据分析的智能运维方法能优化数据中心冷却系统的运行状态，从而达成绿色节能目的；同时也强调了未来的节能系统发展趋势及标准化推进措施等重要方向。适用人群：数据中心管理人员，环保工作者，信息和通信技术行业的专业人士。使用场景及目标：适用于那些希望利用AI和其他技术优化其数据中心效能的企业；通过技术手段达到减少能耗、提升工作效率的目的。其他：随着全球对环境友好技术的关注增加，在数据中心的建设和运维过程中融合AI等新技术已经成为必然趋势。

基于java的网上球鞋竞拍系统设计与实现.docx

09-19

基于java的网上球鞋竞拍系统设计与实现.docx

C语言入门教程.zip

09-19

【c语言入门】静态库、动态链接库、include、makefile、io、文件操作函数、管道原理及应用、简单的数据结构

基于java中药分类管理系统设计与实现.docx

09-19

基于java中药分类管理系统设计与实现.docx

CSS结构、层叠与格式化详解：关键原理与应用

1. **CSS的结构与层次关系**: CSS的结构基于HTML文档的DOM树（Document Object Model），每个元素都有其父元素、子元素以及同级元素。通过选择器（如ID、类、元素和伪类）可以精确地定位和样式化这些元素。元素的...

CSS结构与层叠

特殊性的特例或使用规则：

若有不同来源（及创作人员、读者、用户代理）

推荐 链接样式顺序LVHA(link-visited-hover-active)

推荐链接样式顺序LVHA(link-visited-hover-active)