Hype

Hype中文官网 > 常见问题 > CSS样式的优先等级对对象的作用

CSS样式的优先等级对对象的作用

发布时间:2021/03/03

在前面的两个章节,详细讲述了在Hype 4交互动效制作软件中添加外链样式以及在外链样式文件中编写对象的样式。结果发现,外链样式中对象边框的样式并没有在对象中显现出来。那么,小伙伴知道为什么会这样吗?这其实是CSS样式的优先等级决定的。

本章节将具体的例子向小伙伴详细讲解CSS样式的优先等级对对象的作用。

一、CSS样式的优先等级

1、三种样式的优先等级

三种样式对同一对象赋予相同样式的不同值的时候,例如一个矩形背景颜色,行内样式給红色,内联样式给蓝色,外链样式给黄色,那么矩形的背景颜色最终为红色。也就是说,样式对对象的影响优先级为:

行内样式 > 内联样式 > 外链样式。

三种CSS样式的优先等级
图1:三种CSS样式的优先等级

2、id名与类名以及元素名称的优先等级

在内联样式或者外链样式中,对对象进行样式设置可以通过id名、类名以及元素名称三种形式进行设置。在这三种形式中:

id名:是唯一的,只针对一个对象,优先等级最高;

类名:可以针对一个或者多个对象,只要都赋予了该类名的所有对象,都被赋予样式值。优先等级次于id名;

元素名称:可以针对一个或者多个对象,只要是该元素创建的对象,都会被赋予样式值。优先等级次于类名。

3、id和类名在内联和外链的优先等级

所以,使用对象的id名、类名和元素名设置样式,其优先等级为:

对象的id名 > 对象的类名 > 对象的元素名

id名、类名及元素名在样式中的优先等级
图2:id名、类名及元素名在样式中的优先等级

图3案例中,在外链样式里保持类名的样式——背景颜色为黄色,新增了id名的样式——背景颜色为粉色。内联样式里保持类名的样式——背景颜色为蓝色。

结果在Hype场景中矩形的背景颜色为蓝色;在浏览器中,矩形的背景颜色为粉色。两个结果,以浏览器中的矩形背景颜色正确。因此id名的样式优先级最高,内联样式次之,外链的类名等级最后。优先等级为:

行内样式 > 对象id名 > 内联样式 > 对象类名 > 对象元素名

分别在内联和外链的id与类名的优先等级
图3:分别在内联和外链的id与类名的优先等级

4、最高优先等级

从上面的分析可以看到,使用行内样式对对象的样式设置是优先等级最好的。但是,还有一种方式,其优先等级比行内样式的等级还高,在设置对象的样式时具有最高的优先等级,就是!important。其格式是:

id名/类名 {样式:值 !important;}

特别注意的是,虽然在Hype中没有给对象设置边框等样式,由于存在边框颜色,因而边框的行内样式一直在起作用。

所有形式的样式优先等级为:

!important > 行内样式 > 对象id名 > 内联样式 > 对象类名 > 对象元素名

最高优先等级的样式
图4: 最高优先等级的样式

二、小结

当对象嵌套比较多的时候,样式的优先等级会变得复杂。但由于Hype软件极少用到嵌套,因此样式的优先等级是比较容易处理的。在这里,小编提醒小伙伴:少用!important最高等级。

作者:东佛

标签:嵌套优先等级CSS

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
基础教程:Hype 4入门基础
Hype是一款在MacOS系统下无代码的交互动效制作软件,是一个创作网页的技术平台。通过这个技术平台创作出来的内容,在后台会自动生成代码,可以直接在网上通过浏览器、移动设备等浏览使用。
2020-07-20