百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

css样式引入优先级?_css引入样式的几种方法

yuyutoo 2025-02-20 18:33 6 浏览 0 评论

css中的优先级讲的有

1.选择器的优先级。

2.样式引入的优先级。

今天要研究的是样式引入的优先级。网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何。

四种样式的优先级别是:行内样式最高、

?优先级? 内嵌样式>链接样式>导入样式?

在这四种的优先中,行内样式最高(内嵌样式),大家都是认可的。但剩下的3中就会是我们想的那样吗?

测试代码如下。很简单,先测试内联样式 。一段文本,给设置个color:red;红色。





无标题文档



    

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?

浏览器显示如下。没什么问题。

在接着来看看,用link的方式引入一个外部样式。

引入方式如下。


外部样式看下列代码:

浏览器显示如下:为什么什么显示的不是蓝色?

显示还是红色,难道就是 内联样式>连接样式?接下来调换了调用的下位置。代码如下。


浏览器显示如下。

这样浏览器显示的却是蓝色,这时候我们就能看出个大概了。

优先就是个顺序解析问题,谁的引入样式在前面,后面的样式就会被覆盖前面的样式。也就是说,哪个样式离标签越近,哪个样式的优先就越高。

然后接下要解决的就是@import的问题了。

解释是这样:

@import既可以为页面引入外部样式表,也可以在一个样式表中引入另一个样式表。

例如:

1.@import url("style.css");一个样式表中引入另一个样式表。

2.

也就是用style,或者是使用外部样式文件再去引入多个样式文件。

第一种中,直接在style标签内容中使用。@import。

另开一个css样式文件,代码如下:

html代码如下:





无标题文档







    

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?

浏览器显示没有问题:

接着使用在使用link标签去测试优先级。

先放在前面。引入代码如下:


浏览器显示看到的是还是上面讲到,谁越靠近p标签,就会采用谁的样式。有个词叫上面来着。近水楼台先得月。。。

在看看放在后面会如何。


浏览器显示如下。

没有什么问题。还是一样,近水楼台先得月。。

四种样式的优先级别是:

行内样式最高、

内嵌样式 与 链接样式(哪个更靠近标签,哪个样式的优先级就越高)

导入样式?

@import的优先级问题就请等下篇。

相关推荐

微软Win10/Win11版Copilot上线:支持OpenAI o3推理模型

IT之家4月3日消息,科技媒体WindowsLatest昨日(4月2日)发布博文,报道称Windows10、Windows11新版Copilot应用已摘掉Beta帽...

WinForm 双屏幕应用开发:原理、实现与优化

在当今的软件开发领域,多屏幕显示技术的应用越来越广泛。对于WinForm应用程序来说,能够支持双屏幕显示不仅可以提升用户体验,还能满足一些特定场景下的业务需求,比如在演示、监控或者多任务处理等场景...

推荐一个使用 C# 开发的 Windows10 磁贴美化小工具

...

OpenJDK 8 安装(openjdk 8 windows)

通常OpenJDK8和11都能互相编译和通用。我们建议使用11,但是如果你使用JDK8的话也是没有问题的。建议配置使用OpenJDK,不建议使用OracleJDK,主要是因为版...

基于 Linux 快速部署 OpenConnect VPN 服务(ocserv 实战指南)

一、前言在如今远程办公和内网穿透需求日益增长的背景下,搭建一套安全、稳定、高效的VPN系统显得尤为重要。OpenConnectServer(ocserv)是一个开源、高性能的VPN服务端软件...

巧妙设置让Edge浏览器更好用(edge怎么设置好用)

虽然现在新版本的Edge浏览器已经推出,但是毕竟还处于测试的状态中。而Win10系统里面自带的老版Edge浏览器,却越来越不被人重视。其实我们只需要根据实际情况对老版本的Edge浏览器进行一些简单的设...

WPF做一个漂亮的登录界面(wpf页面设计)

...

微软开源博客工具Open Live Writer更新:多项Bug修复

OpenLiveWriter前身是WindowsLiveWriter,是微软WindowsLive系列软件之一,曾经是博主们非常喜爱的一款所见即所得博文编辑工具,支持离线保存,还支持图像编辑...

基于OpenVINO的在线设计和虚拟试穿 | OPENAIGC大赛企业组优秀作品

在第二届拯救者杯OPENAIGC开发者大赛中,涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到,我们特意开设了优秀作品报道专栏,旨在展示其独特之处和开发者的精彩故事。...

C#开源免费的Windows右键菜单管理工具

...

Windows10或11中隐藏的功能,用它再也不用担心电脑中病毒!

...

Python open函数详解(python open函数源码)

演示环境,操作系统:Win1021H2(64bit);Python解释器:3.8.10。open是Python的一个内置函数,一般用于本地文件的读写操作。用法如下。my_file=open(fi...

Windows 11 安装 Docker Desktop(Windows 11 安装助手 Windows 易升 关系)

...

Windows 11 新版发布:屏幕亮度自适应控制,小组件界面重新设计!

...

世界上最好用的Linux发行版之一,OpenSUSE安装及简单体验

背景之前无意在论坛里看到openSUSE的Linux发行版,被称为世界上最好用的Linux发行版之一(阔怕),一直想体验一下,于是这期做一个安装和简单体验教程吧。...

取消回复欢迎 发表评论: