zoukankan      html  css  js  c++  java
  • css选择器优先级 样式表优先级

    css三大特性:

    继承
    优先级
    层叠
    

    css选择器优先级
    选择器 权重
    通配符 0
    标签名,伪元素 1
    类/伪类/属性 10
    ID 100
    行内样式 1000
    important 1/0(无穷大)
    总结排序:
    !important > 行内样式 > ID > 类、伪类、属性 > 标签名,伪元素 >通配符> 继承>浏览器默认属性
    css样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式。内部样式的优先级别是高于外部样式的。
    如果存在一个style标记:

    行内样式 > 嵌入样式 > 导入样式
    

    若存在链接式,根据style与link出现的顺序;
    如果是heade中存在多个style标记:

    那么这些样式的先后顺序决定了优先级别,而同一 个style内部,才会遵循嵌入样式优先于导入样式的规则。

    参考学习https://www.cnblogs.com/liweitao/p/3623129.html

    优先级特点:
    1.继承的权重为0
    2.权重会叠加。

    css基本选择器

    ID 选择器, 如 #id{}
    类选择器, 如 .class{}
    属性选择器, 如 a[href="segmentfault.com"]{}
    伪类选择器, 如 :hover{}
    伪元素选择器, 如 ::before{}
    标签选择器, 如 span{}
    通配选择器, 如 *{}
    

    复合选择器:
    交集选择器:标签+类(ID)选择器{属性:值}
    并集选择器:选择器,选择器,选择器{属性:值}
    后代选择器:选择器+空格+选择器{属性:值}
    子代选择器 :选择器>选择器{属性:值}

    link与import的区别
    区别
    1.从属关系区别
    @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

    2.加载顺序区别
    加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

    3.兼容性区别
    @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

    4.DOM可控性区别
    可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

    5.权重区别(该项有争议,下文将详解)
    link引入的样式权重大于@import引入的样式。

  • 相关阅读:
    Mysql优化
    RabbitMQ教程
    手把手Centos7 安装jenkins详细教程
    FreeMarker学习系列之一
    Vue学习之Vue模拟后台数据
    vuejs学习之新的components组件挂载
    vuejs学习之项目结构解读
    VueJS学习之Vue-cli项目模板
    菜鸟手把手学Shiro之shiro授权流程
    js基石之---es7的decorator修饰器
  • 原文地址:https://www.cnblogs.com/princeness/p/11664988.html
Copyright © 2011-2022 走看看