文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS的执行顺序和优先级问题介绍

2024-04-02 19:55

关注

本篇内容介绍了“CSS的执行顺序和优先级问题介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!


1、确定CSS样式的导入方式

通常情况下我们知道的CSS导入方式有如下四种:

a、链入外部样式 ----------------<link href="" rel="stylesheet" type="text/css">

b、内部样式表 -----------------<style type="text/css">*{margin:0px;padding:0px;}</style>

c、 内嵌样式 ------------------<body style="background-color:black"></body>

d、导入外部样式 -------------------<style type="text/css">@import"myStyle.css"</style>

当然大部分人对于前三种样式导入方式非常熟悉,最后一个略微有些陌生,我们就先来介绍下这个方式:它雷同于链入外部样式,但实质上是存于内部样式,而且在编写过程中,一定要写在内部样式表内部其他样式前面。简而言之就是:内部的外部样式,实现链入的功能,当然这个功能是需要最先实现的,否则则不具备效果。

2、执行顺序和优先级

这个问题我们先来理解下基本规则:顺序和优先级,在确定优先级的时候,我们就执行优先级高的,而忽略优先级低的;

a、相同导入方式下,同一个对象用不同数量元素来描述时

例:h2{background-color:red;}

#top h2{background-color:blue;}

CSS自有一套特殊性判定方式,特殊性越高的则优先级越高,而特殊性一般情况下说就是描述越具体,则特殊性越高,像例子中加了div的id之后,更能明确是哪一个div下的h2,则后一个的优先级越高,所以最终应该是蓝色的

b、相同导入方式下,同一个对象用不同元素来描述时

例:html中写<h2 id="myWay"></h2>

h2{background-color:red}

#myWay{background-color:blue;}

雷同于上一个对比,此对比中,id选择符或者class选择符的特殊性更高,则优先级越高,所以最后应该是蓝色的

c、内部样式表和内嵌样式表

例:#myWay{background-color:red}

<div id="myWay" style="background-color:blue"></div>

这种进行对比的时候,style元素比id选择符的优先级更高,所以最终会是蓝色

d、特殊性和起源都相同

例:#myWay{background-color:red;}

#myWay{background-color:blue;}

这种的进行对比的时候,以后一个为准,前一个表示被覆盖无法显现,则最终会是蓝色

e、执行重要性!important

例:#myWay{background-color:blue ! important;}

<div id="myWay" style="background-color:red"></div>

当指定重要性的时候,优先级是最高的,所以最终是蓝色

f、文件内部样式和外界导入或者链入

任何文件内的规则都比外界引入的规则优先级高

“CSS的执行顺序和优先级问题介绍”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯