iview样式覆盖,less覆盖样式

2020-10-12 阅读 邵琳溪整理

内容简介:怎么看css样式被什么覆盖了级联优先级为:浏览器默认外部样式表内部样式表内联样式,其中样式表还具有:类选择器类派生选择器ID选择器ID派生选择器派生选择器以前称为上下文选择...

层叠优先级是:浏览器缺省外部样式表内部样式表内联样式其中样式表又有:类选择器类派生选择器ID选择器ID派生选择器派生选择器以前叫上下文选择器,所以完整的层叠优先级是:浏览器缺省外部样式表外部样式表类选择器外部样式表类派生选择器外部样式表ID选择器外部样式表ID派生选择器内部样式表内部样式表类选择器内部样式表类派生选择器内部样式表ID选择器内部样式表ID派生选择器内联样式...共12个优先级有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下代码如下#navigator{height:100%;width:200;position:absolute;left:0;border:solid2#EEE;}.current_block{border:solid2#AE0;}查找一些教材中(w3schools等),只说css的顺序是元素上的style文件头上的style元素外部样式文件,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。

经过测试和继续搜索,得知优先级如下排列:1.样式表的元素选择器选择越精确,则其中的样式优先级越高。

id选择器指定的样式类选择器指定的样式元素类型选择器指定的样式所以上例中,#navigator的样式优先级大于.current_block的优先级,即使.current_block是最新添加的,也不起作用。

2.对于相同类型选择器指定的样式,在样式表文件中,越靠后的优先级越高。

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。

比如.class2在样式表中出现在.class1之后:代码如下.class1{color:black;}.class2{color:red;}而某个元素指定class时采用class=class2class1这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。

3.如果要让某个样式的优先级变高,可以使用!important来指定。

代码如下.class1{color:black!important;}.class2{color:red;}解决方案:此时class将使用black,而非red。

对于一开始遇到的问题,有两种解决方案:1.将border从#navigator中拿出来,放到一个class.block中,而.block放到.current_block之前:代码如下#navigator{height:100%;width:200;position:absolute;left:0;}.block{border:solid2#EEE;}.current_block{border:solid2#AE0;}需要默认为#navigator元素指定class=block2.使用!important:代码如下#navigator{height:100%;width:200;position:absolute;left:0;border:solid2#EEE;}.current_block{border:solid2#AE0!important;}此时无需作任何其他改动即可生效。

可见第二种方案更简单一些。

补充一个例子代码如下htmlheadtitle/titlestyletype=text/cssdiv{color:#00FF00}/*绿色*/.a1{color:#0000FF}/*蓝色*/.a1div{color:#00FFFF}/*青色*/.a2{color:#FF0000}/*红色*/#a2{color:#FFFF00}/*黄色*/#a2div{color:#FF00FF}/*紫色*//style/headbodydiv我是绿色,内部样式表优先于浏览器缺省/divdivclass=a2我是红色,类选择器优先于内部样式表/divdivclass=a2id=a2我是黄色,ID选择器优先于类选择器/divdivclass=a1span我是蓝色,类选择器优先于内部样式表/spandiv我是青色,类派生选择器优先于类选择器/divdivclass=a2我还是青色,类派生选择器优先于所有类选择器/divdivid=a2span我是黄色,ID选择器优先于类派生选择器/spandiv我是紫色,ID派生选择器优先于类派生选择器/divdivclass=a1我还是紫色,ID派生选择器优先于所有类选择器/divdivclass=a1id=a1我还是紫色,ID派生选择器优先于所有ID选择器/divdivclass=a1id=a1style=color:#000000;我是黑色,内联样式驾到闲杂人等退下/div/div/div/body/html效果

另外,如果同一个元素在没有其他样式的作用影响下,其Class定义了多个并以空格分开,其优先级顺序为:一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!代码如下!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns=http://www.w3.org/1999/xhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title/titlestyletype=text/css.a2{font-size:18pt;color:#0000FF!important;}.a1{font-size:9pt;color:#FF0000;}/style/headbodybr/spanclass=a1a1/spanbr/spanclass=a2a2/spanbr/spanclass=a2a1a2a1/spanbr/spanclass=a1a2a1a2/spanbr//body/html运行后的效果图:

作者给您推荐的内容
  1. 今天小编要和大家分享的是抖音怎么删除已发布的视频,希望能够帮助到大家。01、首先在我们的手机桌面上找到抖音并点击它,如下图所示。02、然后点击屏幕右下方的我,如下图所示。03、接着...

  2. AI绘制卡通人物coreldraw角色渲染可以提高我们使用coreldraw的能力。本教程向脚本之家cdr爱好者提供了coreldraw角色渲染过程的详细描述。让我们先看看最终用ai画人物肖像...

  3. 在我们的日常生活和工作中,我们经常使用PPT,那么给PPT进行分享和加密的具体方法我们如何共享PPT呢?如果你不想让别人看到你的PPT,你能加密它吗?接下来,我们来看看小编。具体内容如下:...

  4. 在我们日常的工作和生活中经常用手机拍照,今天小编就和大家分享下怎么把手机拍倒的照片转过来的方法,希望能够帮助到大家。01、打开手机微信,选择文件传输助手,见下图02、打开手机相机...

  5. 在运行win7系统计算机时,最怕遇到病毒感染。如果电脑里的病毒会影响电脑和文件的安全,那么我们应病毒入侵大脑该做一些防范。那么如何解决病毒入侵win7系统的问题呢?别担心,今...

  6. 怎么看已经删除的QQ好友聊天记录?该如何操作呢?01、在QQ中找到好友管理器:登录qq,点击qq左下角小企鹅,点击好友管理器。已删除好友一般在最下面。02、找到已删除的...

  7. 易数数据恢复怎么样简易数据恢复软件适用于手机的各种数据丢失。简易数据恢复软件如何恢复Android手机丢失的数据?这是一个简单的数据恢复软件教程。让我们看看。随着拍照功能越...

  8. 迷你世界是一款高度自由的沙盒类型的游戏,今天我来为大家介绍一下如何获得曙光石粉,希望能够帮到大家。01、在冒险模式中,每到晚上就会出现商人,商人有可能出售曙光石粉,我们可以到商...

  9. 草图大师效果图本教程主要介绍script home的用户使用CDR绘制折叠手机本教程的绘画或写作非常详细,这对于学习基础较差的CDR学习者来说是很方便的。画效果图的软件...

  10. 1打开手机酷狗音乐,找到要分享的歌曲列表。2以音乐库的音乐列表为例。三。选择要共享的歌曲列表。4单手机酷狗怎么分享歌单击右上角的共享按钮。5选择要共享的平台,例如朋友圈。6编辑完成...