美文网首页
CSS的优先级

CSS的优先级

作者: 放飞吧自我 | 来源:发表于2017-08-18 21:31 被阅读3次

CSS选择器的优先级问题:作用元素一样,样式一样,就会发生冲突

选择器的类型有:通配选择器、标签名选择器、class选择器、id选择器、群组选择器、后代选择器。后代选择器有一个相加的过程,而群组选择器没有这样的过程。

1.类型相同的选择器,在样式发生冲突时,后面的覆盖前面的

如:

div{

width:100px;

height:100px;

background:red;

}

div{

background:green;

}

这个最后的结果是出现一个100*100的绿色的块

2.不同类型的选择器,在样式发生冲突时,优先级高的覆盖优先级低的

在html中:<div class="cla1"></div>

在CSS中:

div{

width:100px;

height:100px;

background:blue;

}

.cla1{

background:red;

}

最后出现的结果是100*100的红色块

优先级的大小:通配选择器(*)< 标签名选择器(Tags)<  class选择器  <  id选择器  <  style  <  !important

相关文章

  • 前端复习第二周

    主要复习CSS,style来引入css,link来外联css文件 优先级标签内css优先级 > hand内部css...

  • CSS基础

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

  • 定位css 和xpath

    推荐的定位方式的优先级 优先级最高:ID 优先级其次:name 优先级再次:CSS selector 优先级再次:...

  • 【CSS优先级与!important】

    CSS样式优先级: 1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高...

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

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

  • css选择器优先级以及photoshop快捷键

    css选择器优先级 CSS选择器的优先级:作用的元素一样,样式一样,就会有优先级问题,当优先级相同时,一旦发生重...

  • CSS选择器优先级

    参考文章:优先级- CSS | MDN

  • css-note

    css学习内容 css基础语法 css使用方法 css选择器 css继承与层叠 css优先级 css命名规范 学习...

  • 2018-06-28

    the presentation of that content 呈现的内容 css样式的优先级是在加载css文...

  • 第三天:css选择器的优先级、Adobe photoshop C

    一.css选择器的优先级 css选择器的优先级:作用的元素一样,样式一样,就会有优先级。 1.通配选择器(*):0...

网友评论

      本文标题:CSS的优先级

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