什么是CSS权重值?CSS权重值的优先级是什么?

2023-11-05

什么是CSS的权重值?

1.权重决定了你css规则怎样被浏览器解析直到生效。css权重关系到你的css规则是怎样显示的。

2.当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。

3.每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中 。

4.如果两个选择器同时作用到一个元素上,权重高者生效。

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重

1、!important,加在样式属性值后,权重值为 10000(这个是最高的权重,所以在非必要情况下切勿加此代码!)

2、内联样式,如:style=””,权重值为1000

3、ID选择器,如:#content,权重值为100

4、类,伪类和属性选择器,如: content、:hover 权重值为10

5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1

6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

权重的基本规则

1、相同的权重:以后面出现的选择器为最后规则(比如写了相同的两个样式 #content h1 {color:red} )

2、不同的权重,权重值高则生效

3、!important(无限大)>行内样式(权重1000)>id选择器(权重100)>类选择器(10)=伪类选择器(10)=属性选择器(10)>元素选择器(1)>通用选择器(0)>继承的样式>浏览器默认的样式。

4、元素选择器相加永远没有类选择器的权重大。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

什么是CSS权重值?CSS权重值的优先级是什么? 的相关文章

  • 在 uiwebview 中使用 javascript 将样式应用于文本范围

    我在 iPhone 上的 UIWebView 中将一些简单样式的文本显示为 html 它基本上是一系列段落 偶尔有强烈或强调的短语 在运行时 我需要将样式应用于文本范围 有一些类似的场景 其中之一是突出显示搜索结果 如果用户搜索了 某事 我
  • 使用 jQuery 禁用 CSS 继承

    有没有办法使用 jQuery 或通用 javascript 在块级别禁用 CSS 继承 例如 如果我通过 javascript 拉入外部资源 例如 Pastie org 它们将拥有自己的 CSS 而我的 CSS 会覆盖它们 我想将嵌入代码放
  • 更改输入上的父 div [type=checkbox]:使用 css 检查[重复]

    这个问题在这里已经有答案了 我可以弄清楚如何在选中复选框时更改父 div 更改以下段落效果很好 在 Chrome 中尝试过这种方法但没有运气 HTML div div
  • jQuery Mobile 和文本区域行

    所以 我想展示一个textarea仅 1 行 但 jQuery Mobile 并不这么认为 无论我在rows属性 它始终是 2 行高度 请问有什么解决办法吗 jQuery Mobile CSS 设置了特定的高度textarea要素 text
  • Bootstrap 页脚不在底部

    我试图强制我的页脚位于网站底部 我不希望它在滚动时粘住 只是在向下滚动网页时出现在底部 目前 网页显示时页脚位于内容下方 我添加了这样的代码bottom 0 并发现它粘住了并且不适合我的网站 我还添加了这样的代码html body heig
  • css bootstrap 下拉菜单在 IE 中看起来不同

    我正在使用CSS引导程序3 2 0 http getbootstrap com css 然而 当在 IE 中查看该网站时 菜单选项周围有一个黑色边框 而且下拉菜单按钮看起来也有所不同 如果您查看该网站http getbootstrap co
  • Javascript - HTML Canvas 上的 Gecko 边框半径自适应(CSS border-radius)

    我试图弄清楚如何将 border radius css 属性的行为重现到 HTML 画布中 所以我已经在 J avascript 中做了一些事情 以便使用特定的半径 对于每个角 来计算给定形状的正确边界 如果需要的话 这是上一个问题 Gec
  • 如何在流体宽度表中使用省略号而不使每列大小相同?

    假设我的表中的列是id name description and phone The description列的长度为 1 255 个字符 但 id 最多只有 3 个字符 我希望列的大小适当 而不是每列的大小相同 我想要descriptio
  • 向剪切框添加阴影

    我可以使用 CSS 制作以下盒子及其切口三角形 带有边框技巧 只是没有背景图案并带有轻微的噪音 可以用背景图案制作切口三角形吗 还被阴影困住了 我怎样才能添加它 我是否应该更好地切换回旧方法 在框周围使用跨度和背景图像 编辑 具有一张背景图
  • 使用 CSS 创建互锁的不规则边框

    我有一个由 4 个 互锁 div 组成的布局 如下所示 我想在 顶部 和 底部 位周围放置边框 以使最终布局如下所示
  • Jquery,当屏幕宽度为1050px时删除类

    这是我正在使用的JS代码 document ready function var nav menu2 window scroll function if this scrollTop gt 90 nav addClass f nav els
  • 如何将-webkit-gradient应用到IE上?

    我有以下 CSS 代码 webkit gradient linear left bottom left top from 5AE to 036 Chrome 中的背景显示效果非常好 Internet Explorer 仅显示白色背景 我尝试
  • AngularJS动画卡片翻转

    我正在尝试使用新的 AngularJS 方式在页面转换之间制作动画 并希望合并卡片翻转 例如http jsfiddle net nicooprat GDdtS http jsfiddle net nicooprat GDdtS body b
  • 为什么 Internet Explorer 会使带有 Overflow:hidden 的 div 内的内容消失?

    最里面的 div 内的内容会显示在除 IE 之外的所有浏览器上 为什么 我注意到如果我删除overflow hidden from absolute container 然后里面的内容 item会出现 但出于显示原因 我需要保留 overf
  • CSS水平导航间距

    我正在尝试用 css 创建一个水平导航栏 其中包含 5 个均匀间隔的链接 html 希望保持这样 div ul li a href one html One a li li a href two html Two a li li a hre
  • css中的减号或下划线有什么作用吗?

    这个问题和我问的很相似here https stackoverflow com questions 6110816 period in css does it do anything 我正在清理一些文件 我在这个 css 中遇到了这个 so
  • Twitter Bootstrap:按钮下拉列表中的图标

    Here http jsfiddle net DjHyQ 是 jsfiddle 上的链接 其中包含一些演示 它在 Chrome 甚至 IE 中运行良好 但在 FF 中图标会下降 我怎样才能解决这个问题而不用负边距或类似的东西来提升它们 我不
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • 使用 HTML 标签作为背景图像而不是 CSS background-image 属性?

    我需要使用 html img 标签作为背景图像 div 然后我将放置一个 p 的内容 我已经尝试过 但似乎无法让它们正确显示 我使用了相对位置 负值的边距 任何建议或指出我正确的方向将不胜感激 p div img src http www
  • 表格单元格中 ::after 上的位置在 Firefox 中不起作用?

    以下代码应创建一个跨越其父元素宽度 100 的伪元素 然而 这在 Firefox 中不起作用 但在 Chrome 中却有效 火狐浏览器似乎忽略了 parent s position relative 这是一个错误吗 HTML div cla

随机推荐

  • HTML5----响应式(自适应)网页设计(自动适应屏幕大小)

    HTML5 响应式 自适应 网页设计 自动适应屏幕大小 现在 很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机 电脑等设备 那么就需要我们在页面上下功夫 但移动端的布局不同于pc端 首先我们要知道在移动端中 css中的1px并
  • MyEclipse设置Java代码注释模板

    定义自己喜欢的模板注释 选中你要加注释的方法或类 按 Alt shift J 文件 Files 注释标签 Title file name Package package name Description todo author yok
  • 抓包工具mitmprox

    安装 我这里是在pycharm下项目setting安装的 设置环境变量 将下面exe这个路径添加至path 启动mitmproxy https blog csdn net shifengboy article details 1140672
  • 北邮22信通:实验五 共射放大电路的频率特性与深负反馈的影响

    北邮22信通一枚 很高兴以一个新身份与大家见面 关注作者 解锁更多邮苑模电实验报告 获取更多文章 请访问专栏 北邮22信通 电子电路 青山如墨雨如画的博客 CSDN博客 目录 实验目的 实验设备及器件 实验内容 1 频率特性分析 1 1 C
  • C# linq初探 使用linq查询数组中元素

    使用linq进行数组查询 输出数组中全部的偶数并升序输出结果 写法1 int numbers 5 10 8 3 6 12 查询的数组 var numqurey from num in numbers where num 2 0 按照条件过滤
  • 区间预测

    区间预测 MATLAB实现SARIMA季节性数据时间序列预测 arima函数 目录 区间预测 MATLAB实现SARIMA季节性数据时间序列预测 arima函数 预测效果 基本介绍 研究回顾 模型结构 程序设计 参考资料 预测效果 基本介绍
  • latex 基本用法(二)—— 矩阵(增广矩阵、长虚线)

    latex 基本用法 modm mod m mod modn pmod n pmod 1 增广矩阵 比如鸡兔同笼问题的线性方程组 x y 152x 4y 40 begin split x y 15 2x 4y 40 end split 首先
  • android 自定义控件--(圆盘形菜单控件)

    思路原理 定一个原点和一个半径 圆的四周均匀分布每个菜单 为了方便计算 菜单的坐标用度数表示 然后转化为极坐标计算 定某个点为起始点 根据总菜单数确定每个点增加的度数 然后依次确定每个点的度数 也就确定了坐标 源代码 package chr
  • linux下C语言修改文件权限

    头文件
  • Java 统计文本文件中字符数量

    设有一个文本文件word01 txt 内容如下 after a minute or two and said to his friend he opened them again a minute or two and said to fr
  • 【数据结构——树】Trie树的两种实现方式:二叉树(左孩子右兄弟)与二十六叉树

    输入 输入的第一行为一个正整数n 表示词典的大小 其后n行 每一行一个单词 不保证是英文单词 也有可能是火星文单词哦 单词由不超过10个的小写英文字母组成 可能存在相同的单词 此时应将其视作不同的单词 接下来的一行为一个正整数m 表示询问的
  • c++实现哈夫曼huffman压缩文本

    哈夫曼压缩原理就是构建二叉树 出现频率高的字母用更少的位数来表示 实现压缩的效果 比如字符串abcbbc 构建哈夫曼树 这样构建出编码表b gt 0 a gt 10 c gt 11 原本6个字符要48位来表示 现在只需要9位来表示即可 1
  • FairyGui简单介绍

    1 什么是FairyGui 跨平台UI编辑器 支持多种项目 如Unity Cocos2dx CryEngine HavokVision Starling Egret LayaAir Haxe Pixi LibGDX and More 2 a
  • 视频号的播放量和互动率、完播率密不可分

    如何提高视频号播放量 视频号是推荐机制 分两种 社交推荐 朋友给你点赞 我未关注也可能刷到你 和平台推荐 提高系统推荐的两个指标和一个逻辑 两个指标 互动率和完播率 1 互动率 互动率是指互动次数占总播放量的比重 包含 点赞率 评论率 转发
  • 算法 - 递归实现汉诺塔(The Tower of Hanoi)

    目录 引言 分析 分析两片汉诺塔的迁移过程 分析三片汉诺塔的迁移过程 代码实现 递归出口 递归过程 完整程序代码 运行结果 参考资料 引言 今天接触到了一个非常有意思的游戏 名字叫做汉诺塔 Tower of Hanoi 小时候没有玩过这个益
  • web爬虫学习(四)——手机APP爬取

    思路如下 STEP1 为我们的爬虫找到入口 笔者是一个痴迷于挖掘数据中的价值的学习人 希望在平日的工作学习中 挖掘数据的价值 找寻数据的秘密 笔者认为 数据的价值不仅仅只体现在企业中 个人也可以体会到数据的魅力 用技术力量探索行为密码 让大
  • TFTP常用命令

    一 上传到指定文件夹 tftp p l file target ip 这里的file可以是一个目录 如 C User Administrator Documents 二 下载到当前目录 tftp g r file source ip 这里的
  • webug 4.0 第十关 存储型xss

    感谢webug团队一直以来的更新维护 webug是什么 WeBug名称定义为 我们的漏洞 靶场环境基础环境是基于PHP mysql制作搭建而成 中级环境与高级环境分别都是由互联网漏洞事件而收集的漏洞存在的操作环境 部分漏洞是基于Window
  • 将在数组中的对象的 key,做替换

    固定更换个别 key key1 映射 stroke value 替代值不变 比如 value 的 stroke const arrayOfObj key1 value1 key2 value2 key1 value1 key2 value2
  • 什么是CSS权重值?CSS权重值的优先级是什么?

    什么是CSS的权重值 1 权重决定了你css规则怎样被浏览器解析直到生效 css权重关系到你的css规则是怎样显示的 2 当很多的规则被应用到某一个元素上时 权重是一个决定哪种规则生效 或者是优先级的过程 3 每个选择器都有自己的权重 你的