[CSS] 当多个CSS文件对同一个元素属性进行设置，会发生什么？

最新推荐文章于 2024-06-16 17:29:19 发布
最新推荐文章于 2024-06-16 17:29:19 发布
阅读量9k 收藏 2
点赞数 5
分类专栏： css web前端 文章标签： css web前端 stylesheet 浏览器 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zry656565/article/details/19258507
版权

本文来自于我的个人博客，有兴趣的朋友可以过来瞧瞧：http://jerryzou.com


CSS作为Web前端的三剑客之一，有着极为重要的地位。它使得页面的表现与内容很好地分离开来，如今各大浏览器对它的支持也日趋完善起来。

但是多处CSS文件对同一个元素或者类的样式进行修改的情况屡见不鲜，以至于在代码量成几何倍增加时，有时会让人产生迷惑感。下面举个例子：

<!-- test.html -->
<head>
    ...
    <link href="res/css/test1.css" type="text/css" rel="stylesheet">
    <link href="res/css/test2.css" type="text/css" rel="stylesheet">
</head>


/* test1.css */
body { background: yellow; }
body { background: blue; }
/* test2.css */
body { background: black; }
body { background: red; }

这里有四个地方对body元素的背景进行设置。在实际解析中，哪次设置将会被采用呢？

答案是最后一次，也就是test2.css中值为red的那次设置。因为在样式中对同一个元素的属性发生重复设置时，后一次会覆盖前一次。在例子中，如果test1.css的引入顺序在test2.css之后的话，则会发现背景颜色变成蓝色了。

转载请注明出处：jerryzou.com
开心的蛋蛋哥
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html中css对多个元素相同属性的设置问题
wordpython
02-23 1万+
！要用逗号隔开，如： .son1, .son2, .son3{ width:100px; height:100px; margin:5px; display:inline-block; /* 将块级元素转化为行内块元素*/ border:1px dashed black; } &lt;div class="son1"&gt;盒子1&lt;/div&gt; &lt;d...
css() 方法来设置元素
2301_77661976的博客
01-07 330
需要注意的是，使用 .css() 方法设置的样式直接作用于元素的 style 属性，会直接修改元素的行内样式。请注意，这只是使用 jQuery 的一种方式来设置元素的样式。在现代 Web 开发中，更多的开发者选择使用原生 JavaScript 的方法来操作元素的样式，例如使用 .style 属性直接访问和设置元素的样式。当使用 jQuery 的 .css() 方法设置样式时，可以使用各种 CSS 属性来控制元素的外观。如果要获取元素的样式属性值，可以使用 .css() 方法的无参形式，即不传入参数。
CSS【详解】样式优先级（含提升优先级的方法、样式的层叠、数值计算法等）
最新发布
朝阳39的博客
06-16 1521
数值越大，优先级越高，尽量保持较低的优先级，以便使用更高优先级的选择器重置样式0级——通配选择器、选择符和逻辑组合伪类。逻辑组合伪类有:not()、:is()和:where等，这些伪类本身并不影响CSS优先级，影响优先级的是括号里面的选择器。1级——标签选择器2级——类选择器、属性选择器和伪类3级——ID选择器4级——style内联5级——!important!important是顶级优先级，可以重置JavaScript设置的样式，唯一推荐使用的场景就是使JavaScript设置无效。
CSS中多个类叠加相同属性属性值优先级问题
qq_45174540的博客
11-12 4768
今天在学习vue.js的时候发现自己CSS的权重和优先级问题没弄透彻，之前有去总结但没好好运用，发现问题了，好吧！ 如果一个div有多个类名，如下： <div class="activeClass errorClass"></div> <br> <div class="errorClass activeClass"></...
absolute如果找不到定位父元素那么会相对于谁进行定位_CSS样式更改——框模型、定位、浮动、溢出
weixin_39641257的博客
11-27 80
前言上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓，这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。1.框模型Border Model从上图可以得知，如果把一个网页比作一个方框，那么border padding margin 所扮演的角色。通过通用选择器，可以设置所有的元素的border padding margin 初始值为0：*{margin:0;padding:0;...
html css 重复,CSS重复定义的问题请教_html/css_WEB-ITnose
weixin_39914049的博客
06-20 326
，是不是就无效了？回复讨论(解决方案)外部css样式和内部css样式同时存在，以内部css样式为准。内部css样式与标签的style属性同时存在，以style属性的样式为准。你说的这种情况应该是两者都会有效，但CSS类的优先级更高，如果存在相同的样式属性，CSS类中的定义的样式会覆盖对ul li样式。CSS优先级： http://spemoon.github.com/blog/2011/09/0...
jQuery css() 方法动态修改CSS属性
11-22
})`，例如 `$("p").css({"background-color": "yellow", "font-size": "200%"})` 同时设置多个 CSS 属性。 此外，`jQuery.css()` 还可以接受一个函数作为第二个参数，该函数会为每个匹配的元素计算并返回一个新的 ...
实现多个元素CSS3过渡效果的js插件
12-13
通过指定一个或多个CSS属性，以及过渡的持续时间和速度曲线，开发者可以创建出丰富的动画效果。AnimateTransition这款JS插件正是基于此原理，扩展了CSS3过渡在多元素间的应用。 **AnimateTransition JS插件介绍** ...
使用css画一个文件上传图案
11-21
outline属性是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 。 轮廓有下面几个属性： { outline-style: solid; outline-width: 10px; outline-color: red; } 他们有一种简写形式： { outline: 10px ...
使用CSS的border-radius属性 设置圆弧
11-21
当我们将一个方形元素的四个边框圆角都设置为50%时，该元素会变成一个圆形。这是因为四个角的半径相加等于元素宽度的一半，使得元素的四边刚好能“包裹”住一个圆形。例如： ```css div { width: 200px; height: ...
jQuery CSS()方法改变现有的CSS样式
12-09
jQuery入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。...如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法。 var mycss = { background: '#EEE', w
CSS基础
Lecheng_的博客
04-09 381
CSS基础 基本标签选择器 行内样式定义，任何一个标签都可以通过style属性定义这个标签独有的显示效果内部样式表显示内容 基础标签选择器的分类 标签选择器、类型选择器、id选择器 标签选择器 以标签名称作为选择器选中标签 “标签名{样式}” 标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式类型选择器 在标签内部通过class属性，给标签设置类型名在样式表中通过【.类型名{样式}】 的方式给标签盒子设置样式 类型选择器特点： 相当于给标签起了一个别名 不同盒子可以有相同的class
CSS：选择器
离开屏幕的光，哪盏灯照亮你的孤独？
04-16 339
选择器 定位到某个标签添加样式信息 基本选择器 1、标签选择器（body，div，p，ul，li...） 根据标签名称定位到元素，会把当前网页上的所有的这个标签的样式更改掉 有多个标签时，中间使用“,”隔开 标签名称{样式名称:样式值;...;} p{ color:firebrick; font-size:50px; } 2、类选择器（.） 某一类标签可以通用一...
css选择器，选择标签内多个相同标签的任意一个
m0_65677244的博客
03-17 844
css高级选择器
CSS分组选择器（不同CSS设置相同属性）
zhxzrd的博客
07-26 1476
使用分组选择器，设置相同的属性。
HTML5+CSS、CSS3基础知识点总结
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
解决CSS样式重复定义带来的冲突问题
小鹰信息技术服务部
04-10 2809
近期某项目中遇到一个css样式的问题，本来系统里有一套css样式定义，工作正常。 后来引入了一个设计师自己搞的图表，js+css。嵌入系统之后发现样式不正常，检查原因发现第三方图表自带的css中有一些内容和系统现有内容冲突了，例如： body部分 /*现有 app.css*/ body { height: 100%; } /*第三方 index.css*/ body { background-image: url(img/bg1.jpg); background-repeat: n
CSS入门
热门推荐
wuyxinu的博客
12-17 6万+
目录 一、CSS简介 二、内容 1.css的引入方式 2.元素的id和class 3、CSS选择器 4、文本样式总结 5、文本样式总结 6、边框样式 7、 背景样式概述 8、超链接样式 9、图片样式 10、列表样式 11、表格样式 12、CSS盒子模型 13、浮动布局 14、定位布局 预备知识与后续知识及项目案例 [HTML入门与进阶以及HTML5][CSS][...
css引入方法
痞子51998
08-23 490
在HTML中引入css的其中的两个方法：    导入式和链接式的目的都是将一个独立的css文件引入一个文件中，二者的区别不大，事实上，二者最大的区别在于链接式使用html的标记引入外部css文件，而使用导入式则是使用css规则引入外部css文件。因此它们的语法也不同。 1.如果使用链接式，需要使用如下的语句引入外部css文件： 2.如果使用导入式，则需要使用如下语
css中多个元素具有名称相同但数值不同的属性如何设置
06-11
可以使用CSS类选择器来为多个元素设置相同但数值不同的属性。首先，在CSS中定义一个类名，例如"my-class"，然后将该类名分别分配给需要设置属性的元素。例如： ```css .my-class { font-size: 16px; color: #333; } <div class="my-class">这是一个元素</div> <p class="my-class">这是另一个元素</p> ``` 这样，两个元素都将具有相同的属性，其中字体大小为16像素，颜色为#333。如果需要更改某个元素的属性，只需更改该元素的类名即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值