美文网首页
CSS 规则的优先级顺序

CSS 规则的优先级顺序

作者: michael_jia | 来源:发表于2017-01-16 22:47 被阅读86次

The location of the styles and rules is one factor in the order of precedence. Specific rules take precedent over more general rules. Also, the rules toward the end of a style sheet take precedence over the front rules.

三种来源(origin)的优先顺序
  • user style sheet 一般用户不会使用,并且也主要是用来规范浏览器厂商渲染使用的;
    Sort according to importance (normal or important) and origin (author, user, or user agent)
    1. User Agent
    2. User Normal
    3. Author Normal
    4. Author Important
    5. User Important
  • 在实际应用中,用户自定义的样式表已经脱离我们的控制,我们要考虑的就是:
    ☆ User Agent(浏览器)
    ☆ Author Normal (网站文件)
    ☆ Author Important
    有一个我们熟知的基本逻辑,即网站通常会写一个基本样式文件,以覆盖浏览器默认样式;
  • Default style sheets are supplied by the browser vendor.
    浏览器默认样式;
    user agent 用户代理,也就是浏览器,比如 IE、Chrome、...,每个浏览器有自己的默认样式;
  • Author style sheets are supplied by the author of a webpage.
    网站样式;Author 就是网站的制作者;
  • User style sheets are supplied by the user of the browser.
    用户自定义样式;User 是网站的阅读者,可以定义自己的样式,比如字体加大、改个颜色什么的,主要是满足 Web accessibility(网络无障碍)要求,以实现失能人士可以顺利获取信息的一般权利;
    userstyles.org 提供了浏览器插件,可以管理使用 user style,比如:Stylish for Chrome
关于 Normal & !important style
  • Normal 样式是按照从上到下的方法处理的;
    假定先定义了 background-color:#00ff00; 然后又定义了 background-color:#000000;
    渲染结果:对同一个元素,黑色背景是胜出的;
  • Important 样式会复写 Normal 样式;
    同样的例子,先定义 background-color:#00ff00 !important; 然后又定义了 background-color:#000000;
    渲染结果:尽管黑色背景定义在后,但是最后是黄色胜出;
  • 使用 !important 或者加一个 inline style,应当慎重使用;

相关文章

  • CSS常见问题

    CSS优先级算法如何计算? 样式优先级规则: 优先级顺序为:!important>style>权重值权重规则:第一...

  • CSS样式优先级

    遵循以下优先级(参考MDN CSS优先级) 以下顺序按照优先级递减的规则排列 !important规定的规则(不建...

  • css的优先级到底是怎么计算的呢?

    浏览器计算css优先级一共有三个阶段 优先级计算的顺序⬇️ CSS规则的重要性和来源 CSS规则的特殊性 CSS规...

  • CSS 规则的优先级顺序

    Order of Precedence for CSS Rules; The location of the st...

  • 1. CSS 基础

    w3c 教程 1. 优先级由高到低顺序 内联样式 内部样式 外部样式表style.css 2. CSS 语法规则 ...

  • CSS基础

    CSS :层叠样式表(Cascading Style Sheets)。 CSS 书写位置及优先级(优先级按顺序排列...

  • CSS特性 & CSS优先级算法

    CSS特性 层叠性 继承性 优先级 CSS层叠性 在css样式中,与样式的调用顺序无关,与样式的定义顺序有关。 层...

  • CSS篇 - 样式匹配规则

    (一)问题描述 1、css规则匹配规则 2、css文件匹配顺序 3、.a, .b, .a .b, .a.b...

  • css代码规范

    CSS选择器 CSS执行顺序 CSS书写顺序 CSS规范 CSS命名规则 语义化当清除所有自定义的样式与布局,只使...

  • CSS书写规范、顺序和命名规则

    CSS书写规范、顺序和命名规则 一、CSS书写顺序 1.位置属性(position, top, right, z-...

网友评论

      本文标题:CSS 规则的优先级顺序

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