关于CSS：优先级

Firefox:
ID选择器(形如#divMain{}) > 类(形如.divSpecial{}) > 标签(形如body{})

IE: 
类 > ID选择器 > 标签

例:
<div id="divMain" class="divSpecial">内容儿</div>

在Firefox中表现出 #divMain{} 所定义的样式，而在IE中则表现出 .divSpecial{} 所定义。

赞 (0)

相关推荐

  • 新手学习css优先级

    css不是一种程序语言,而是一种描述语言.因此,可以说,css理解起来是非常容易的,大部分人通过简单的学习就可以懂得如何写css代码来定义网页的样式.但是,大部分人同样也会在写css的过程中产生很多困惑,比如为什么自己写的某段css没有生效,或者呈现出的样式和预计的不同,但又不知道要如何解决. 造成这些问题的主要因素,是css优先级.css优先级是css中最难理解的概念之一,但对于掌握css来说非常重要.理解css优先级,不仅有利于快速解决样式问题,而且能在布局层面,帮助我们写出更明晰,更合理的

  • js+css在交互上的应用

    js+css在交互上的应用

    但灵活应用CSS会有给人眼前一亮的感觉! 以下用一个简单的例子来阐述我想说的. CSS代码: 复制代码 代码如下: #nav li ul { display:none; } HTML代码: 复制代码 代码如下: <div id="nav"> <ul class=""> <li> <h3>菜单1</h3> <ul> <li>子菜单1</li> <li>子菜单2&

  • javascript 进阶篇2 CSS XML学习

    javascript 进阶篇2 CSS XML学习

    CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表.它的好处就是能让代码整齐,并且可以批量处理一些样式. 基本语法: 注释符:/* */ 选择符:selector {attribute:value} 同一个属性的值用空格符号隔开,不同属性用分号隔开. 区分大小写. 比如要给页面中的table定制样式,则写table {.....;.....;} 选择符的使用方法有很多种,于是我又一次懒得打,从网上抄来的: 选择符模式 说明 * 匹配任意元素.(通用选择

  • css进阶学习 选择符

    在我最早开始写css的时候,其代码上的高自由度就一直很令我困惑.这就是说,同一个设计,如果让不同的人来实现,最终的代码一定是有差异的.但这存在一个问题,如果不同的人通过不同的方法以及代码风格,都从外观上实现了一样的设计,将很难评价谁做得更好.想来也是,既然都实现了设计,达到了目的,css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢? 而如今,我认同的观念是,css这种描述性语言,仍然有着代码上的质量评判.评判标准就是可维护性(Maintainability)和性能(Performa

  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有

  • 详解浏览器渲染页面过程

    详解浏览器渲染页面过程 1.解析HTML文件,创建DOM树 自上而下,遇到任何样式(link.style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载). 2.解析CSS 优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式: 特定级:id数*100+类或伪类数*10+tag名称*1 3.将CSS与DOM合并,构建渲染树(renderingtree) DOM树与HTML一一对应,渲染树会忽略诸如head.display:none的元素

  • 原生javascript获取元素样式属性值的方法

    所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC

  • 解决vue的过渡动画无法正常实现问题

    前记:最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实; 建议:先学习vue官方文档的进入/离开 & 列表过渡章节,那么我们来看bug; 首先上出现问题的代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transitio

  • Chrome插件(扩展)开发全攻略(完整demo)

    Chrome插件(扩展)开发全攻略(完整demo)

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们正在说的东

  • CSS规则层叠时的优先级算法

    inline style  embeded style  external style  user style  inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦.它们往往以这样的面目出现: <p style="color:red;">This is a paragraph.</p> embeded style比inline style绅士一些,它们也寄宿在HTML文档中,但是它们不屑于与HT

随机推荐