博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS Selector覆盖顺序
阅读量:5866 次
发布时间:2019-06-19

本文共 824 字,大约阅读时间需要 2 分钟。

我们都知道CSS的定义是可以被覆盖的,但是覆盖的顺序可能并不清楚,本文的目的就在于介绍CSS的覆盖顺序。

三种类型CSS的优先级顺序

CSS有三种类型:

  1. inline style:以style属性的形式直接写在标签上的

  2. embedded style:写在html文件的<style></style>里的

  3. external stylesheet:引用的外部css文件

这三种类型的CSS的优先级就是上面所讲的顺序。将通俗点就是inline style肯定会覆盖embedded style的定义,而embedded style肯定会覆盖external stylesheet的定义。

当然,如果引用多个external stylesheet的话,那么后面的也会覆盖前面的。

CSS selector之间的优先级顺序

以下是不同selector之间的优先级:

  1. The ID selector,ID选择器。#a{...}

  2. The attribute selector,属性选择器。a[target=_blank]{...}

  3. The class selector,类选择器。.classa{...}

  4. The child selector,子元素选择器。table > tr {...}

  5. The adjacent sibling selector,相邻元素选择器。.classa + .classb {...}

  6. The descendant selector,儿孙辈选择器。div td {...}

  7. The type selector,元素类型选择器。input{...}

同样,在相同的选择器类型之间后面的会覆盖前面的定义。

终极覆盖法

!important关键字能够覆盖一切定义,无视前面提到的优先级顺序。

比如:color:red !important;。不论这段CSS写在什么地方,还是以什么selector出现,都会覆盖其他的CSS定义。

参考资料

转载地址:http://lqnnx.baihongyu.com/

你可能感兴趣的文章
linux下C调用shell命令
查看>>
poi解析excel文件
查看>>
我的友情链接
查看>>
一些shell命令
查看>>
easyUI常见 length或rowspan为空或不是对象的解决办法
查看>>
linux下redis的安装
查看>>
安装redis 及 PHP redis 扩展
查看>>
jsp放在web-inf目录下
查看>>
OpenGL进阶(十五) - 弹簧质点系统(Mass Spring Systems)
查看>>
安装discuz advice_mysqli_connect
查看>>
六、Python函数
查看>>
微信小程序开发教程
查看>>
Spring Boot 中实现定时任务的两种方式
查看>>
Red Hat 系列如何快速定制二进制内核 RPM 包?
查看>>
cent os 7 安装 rabbitmq
查看>>
SQL 注入
查看>>
用gperftools优化Nginx和MySQL内存管理
查看>>
ORA-00600[kcratr_nab_less_than_odr]故障解决
查看>>
CentOS6.5基于iptables实现单网卡端口转发
查看>>
不管是建站或APP,都一定要有个好LOGO
查看>>