美文网首页
选择器类型及优先级

选择器类型及优先级

作者: 马建阳 | 来源:发表于2017-11-01 18:46 被阅读6次

一、选择器



相邻兄弟选择器A+B



普通兄弟选择器A~B



多元素选择器A,B


二、选择器的优先级

从高到低依次是:
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
实际上,同一个元素可以使用多个规则来指定它的字体颜色,每个规则都有自己的选择器。显然最终只有一个规则起作用(不可能一个字既是红色又是绿色),那么该规则的特殊性最高,特殊性即css优先级。那么CSS的优先级怎么计算呢?

选择器的特殊性值表述为4个部分,用0,0,0,0表示。
ID选择器的特殊性值,加0,1,0,0;
类选择器、伪类或属性选择器,加0,0,1,0;
标签和伪元素,加0,0,0,1;
通配选择器对特殊性没有贡献,即0,0,0,0;

最后比较特殊的一个标志!important(权重),它没有特殊值,但是他的优先级是最高的,为了方便记忆,可认为他的默认值是1,0,0,0.示例如下: 执行效果:

选择器的特殊性值是从左向右排列的

相关文章

  • CSS基础知识梳理

    CSS基础知识零碎梳理 选择器 1、选择器优先级: 2、样式优先级 3、选择器的组合 (1)基本选择器: 类型说明...

  • CSS学习记录-CSS选择器及优先级记录

    各种选择器及优先级 选择器中有相同属性设置时的优先级顺序如下:包含选择器>style > id > class >...

  • 前端:CSS选择器优先级计算

    下面的选择器优先级递增: 类型选择器(h1, :before等) 类选择器 (例如,.example),属性选择器...

  • 微信小程序(二)WXSS

    wxss本节目标 了解小程序支持的选择器类型 了解小程序各选择器的优先级 学会计算简单的优先级 (一) 选择器 w...

  • 2.选择器

    选择器具有优先级一般来说,ID选择器>类选择器>类型选择器 在 标签上添加类名或ID使用类标识页面类型,使用ID标...

  • 选择器类型及优先级

    一、选择器 相邻兄弟选择器A+B 普通兄弟选择器A~B 多元素选择器A,B 二、选择器的优先级 从高到低依次是:1...

  • 今日所学知识点

    选择器的优先级 1.权重内联样式 优先级1000id选择器 优先级100类选择器 优先级10元素选择器 优先级1通...

  • CSS样式优先级

    1.CSS样式优先级如下: 元素(类型)选择器(如,h1) < 伪元素(如,::before) < 类选择器(如,...

  • 2019-05-28 选择器优先级,a的伪类,文本标签,列表,单

    选择器的优先级 优先级的规则 内联样式,优先级1000 id选择器,优先级100 类和伪类,优先级10 元素选择器...

  • CSS的选择器

    1.标签选择器、类选择器、id选择器、后代选择器 2.伪类 3.选择器的优先级别 4.html标签的类型 5.cs...

网友评论

      本文标题:选择器类型及优先级

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