首页 > 其他分享 >CSS05.层叠

CSS05.层叠

时间:2023-03-24 19:11:34浏览次数:28  
标签:浏览器 CSS05 样式 样式表 层叠 选择器 属性

层叠

声明冲突:同一个样式,多次应用到同一个元素

层叠:解决声明冲突的过程,浏览器自动处理(权重计算)

 

  • 概念:

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

  • 原则:

样式冲突,遵循的原则是就近原则。哪个样式离结构近,这个属性将会覆盖另一个属性。

样式不冲突,不会层叠

 

1.比较重要性

重要性从高到低:

作者样式表:开发者书写的样式

1)作者样式表中的 !important样式 (一般不用,因为要修改的话很麻烦)

2)作者样式表中的普通样式

3)浏览器默认样式表中的样式

 

2.比较特殊性

看选择器

总体规则:选择器选中的范围越窄,越特殊

具体规则:通过选择器,计算出一个4位数(x x x x)

  1. 千位:如果是内联样式,记作1,否则记0(style)

  2. 百位:等于选择器中所有id选择器中的数量

  3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量

  4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量

注:并不是满十进一,不用管进位,看数,如果一样大就往后比

例:test2

 

3.比较源次序

代码书写靠后的胜出

应用

  1. 重置样式表

书写一些作者样式,覆盖浏览器的默认样式

重置样式表 -> 去覆盖浏览器的默认样式

常见的重置样式表:normalize.css、reset.css、meyer.css

  1. 爱恨法则

link > visited > hover > active

标签:浏览器,CSS05,样式,样式表,层叠,选择器,属性
From: https://www.cnblogs.com/zjy1020/p/17253073.html

相关文章

  • 【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )
    文章目录​​一、CSS层叠性​​​​1、样式层叠冲突​​​​2、样式层叠不冲突​​一、CSS层叠性1、样式层叠冲突CSS层叠性:为标签设置多种CSS样式,会出现CSS......
  • 前端之CSS介绍(层叠样式表)
    CascadingStyleSheets(CSS)1.CSS就是在HTML文档中,如何显示HTML标签,元素,以及他们的样式布局,前端页面的展示形式均由CSS来布局.2.如何使用CSS内部样式表head标签里<styl......
  • css层叠性和继承性
    ......
  • 7、CSS权威指南--特指度和层叠
    继承是指把一个元素的某些属性值传递给后代的机制。确定应该把哪些值应用到元素上时,用户代理不进要考虑继承,还要考虑声明的特指度,以及声明的来源。这个过程称为层叠。1、......
  • CSS - CSS的三大特性,层叠性,继承性,优先级
    1.层叠性给一个元素设置两个相同的样式类型,样式冲突了,遵循的原则是就近原则,元素离哪个样式近就执行哪个样式 2.继承性后代元素会继承父元素的样式会产生继承性的样式......
  • CSS层叠样式表
    目录CSS前戏1.css语法结构2.css注释语法3.引入css的多种方式CSS基本选择器1.标签选择器2.类选择器3.id选择器4.通用选择器CSS组合选择器CSS前戏主要用来调节html标签的各......
  • 表单标签补充及css层叠样式
    表单标签补充及css层叠样式一、表单知识点补充1.获取用户输入的标签两大重要属性name属性:类似于字典的键value属性:类似于与字典的值#form表单朝后端发送数据的时候,标......
  • Web前端开发:CSS层叠样式表
    目录CSS层叠样式表-html标签的两大重要属性1.class属性2.id属性一、CSS语法结构1.语法结构2.CSS注释语法3.引入CSS的多种方式(1)嵌入式(2)外链式(3)内联样式二、CSS选择器1.CSS基......
  • CSS层叠样式表
    今日内容概要表单标签补充说明CSS层叠样式表如何查找标签如何添加样式今日内容详细表单标签的补充说明基于form表单发送数据1.用于获取用户数据的标签......
  • CSS层叠样式表
    CSS层叠样式表CSS简介CSS主要用来调节html标签的各种样式。对于html大量的标签,我们首先要有寻找标签的能力,才能对各类标签和各个标签进行精准的修改。所以CSS的学习主......