结构与层叠

作者: hcxowe | 来源:发表于2016-11-26 13:33 被阅读3次

选择器的特殊性

特殊性从高到低排列, 同级特殊性相加比较,不能跨级比较

  • 内联样式- ID选择器
  • 类选择器、属性选择器、伪类选择器
  • 元素选择器、伪元素选择器
  • 通配符选择器
  • 继承样式

样式来源

CSS中的样式一共有三种来源:创作人员、读者和用户代理,来源的不同会影响到样式的层叠方式

  • 创作人员样式
    • 前端开发者写的那些样式
  • 用户代理样式
    • 浏览器提供的默认样式
  • 读者样式
    • 浏览网页的用户通过浏览器提供的接口为网站添加的样式
    • 添加方法:IE可以通过Internet 选项 -> 外观 -> 辅助功能 -> 用户样式表来指定样式文件。Chrome可以使用Stylish扩展来实现
Paste_Image.png

权重规则:

  • 读者!important样式 > 创作人员!important样式 > 创作人员正常样式 >读者正常样式 > 用户代理样式

层叠规则

  1. 找出同一个规则有冲突的所有选择器
  2. 如果有多个样式来源,根据样式来源的权重大小确定样式
  3. 第二点不能确定样式,根据选择器的特殊性高低确定样式
  4. 第三点不能确定样式,根据规则出现的顺序先后确定样式

相关文章

  • 结构与层叠

    选择器的特殊性 特殊性从高到低排列, 同级特殊性相加比较,不能跨级比较 内联样式- ID选择器 类选择器、属性选择...

  • 结构和层叠

    继承 特殊性 声明本身的来源 规则: 选择器 声明块 声明块: 属性: 值(关键字往往由空格分隔) 对于每个规则,...

  • CSS 结构和层叠

    选择器的特殊性 在CSS中针对某个元素的多个相同的规则,浏览器会计算其特殊性。如果一个元素有多个冲突的规则,具有最...

  • CSS(一)简介

    什么是CSS 大名:Cascading Style Sheets 寓意:层叠 样式 列表 CSS的作用 结构与样式...

  • 前端学习(五)

    CSS简介: 层叠样式表:CascadingStyleSheet 所谓层叠,可以将整个网页想象为多层叠合的结构,层...

  • 层叠与继承

    目标 学习层叠,优先级,以及css继承是如何工作的 css 层叠样式表 1 .某些时候发现一个项目中一些应该产生效...

  • HTML中-CSS

    CSS css:层叠样式表 网站分层为: 1:结构层:(html结构) 2 :表现层:(...

  • 层叠上下文与层叠顺序

    20190303-22:47于家中 一旦普通元素具有了层叠上下文,其层叠顺序就会变高。那它的层叠顺序究竟在哪个位置...

  • CSS学习1(结构和层叠)

    继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,户代...

  • CSS(层叠样式表)之优先级

    CSS层叠性 样式冲突,遵循的原则是就近原则。哪个样式离着结构近,就执行哪个样式。样式不冲突,不会层叠 CSS继承...

网友评论

    本文标题:结构与层叠

    本文链接:https://www.haomeiwen.com/subject/pifgpttx.html