如果页面制作的时候遇到定义的CSS不起作用,你可能遇到了CSS优先级的问题。CSS优先级在CSS里算是比较难懂的部分,不同权重的CSS选择器有可能就是你出错的原因,所以作为页面开发人员必须了解CSS优先级特性。
CSS优先级特性概述:
1. 通过优先级计算,让浏览器先解析哪条CSS规则。
2. 优先级特性经常是你定义的CSS规则不起作用的原因,虽然你认为起了作用,然而却不是。
3. 每个选择器都有它的优先级层次。
4. 如果两个规则同时作用于一个元素,优先级高的获胜。
5.优先级特性可以分为四类:inline styles, IDs, classes+attributes and elements.
6.英文好的可以看下这两篇文章, CSS Specificity Wars和CSS Specificity for Poker Players
7.如果选择器有两个等级相同的值,后面的值会覆盖前面的值。
8.如果选择器有等级不同的值,以等级高的算,比如!important。
9.拥有更多优先特性选择器的规则更具有优先特性。
10.后面的规则肯定会覆盖前面相同的规则。
11.内嵌的CSS规则优先级特性最高。
12.CSS文件里,ID的优先级特性最高。
13.想要增加优先级,可以使用ID。
14.class比element级别高。
15.选择器分为四个级别,计算方式 0,0,0,0。
16.推荐一个CSS优先级计算器,CSS Specificity Calculator.。
什么是优先级特性
优先级计算是为了决定浏览器解析哪条规则。“优先级特性的权重关系CSS的显示。”Understanding Specificity (明白优先级特性)。
选择器的优先级特性决定了同一个元素多条规则下哪条规则实施。Selector Specificity (选择器优先级)。
每个选择器都有优先级,两个选择器作用与同一个元素,优先级高的获胜。
CSS优先级级别:
1. Inline styles 内嵌页面的CSS样式,比如<h1 style=”color:#000″></h1>
2.IDs 比如#myid
3.Classes, attributes and pseudo-classes 比如 .classes, [attributes]:hover, :focus
4.Elements and pseudo-elements 比如 div,p,h1,包括:before和:after
怎样测量优先级?
内嵌的为1000,ID为100,Classes, attributes and pseudo-classes为10,Elements and pseudo-elements 为1。
body #content .data img:hover 这里的特性值为 0,1,2,2
分享到:
相关推荐
然而,当涉及到打印网页时,有时可能会遇到CSS不显示的问题,这使得打印出来的页面样式与在屏幕上看到的有所差异。本篇文章将深入探讨CSS打印不显示的原因和解决方案。 首先,我们要理解CSS打印与屏幕显示的区别。...
解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也
CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
"js css实现LCD数字显示"这个主题涉及到如何使用JavaScript(js)和层叠样式表(CSS)技术来模拟LCD液晶显示屏上的数字显示效果。液晶显示器(LCD)数字通常用于各种设备,如时钟、仪表盘或简单的用户界面,它们以...
总之,解决`scroll-view`与CSS左右滑动超出部分背景颜色不显示的问题,需要对小程序的渲染机制、CSS布局以及滚动条样式有深入的理解。通过细致的排查和合理的代码编写,可以确保用户在滑动浏览时获得良好的视觉体验...
在处理中文字符时,可能会遇到各种问题,如乱码、字体不正确或者显示不全等。下面我们将详细探讨如何使用CSS确保网页中的中文能够正确、美观地呈现。 首先,我们要理解浏览器是如何处理字符编码的。在HTML或CSS文件...
这篇文章主要介绍了如何使用CSS3中的@keyframes和animation属性来实现多个元素依次显示的效果。具体来说,关键帧动画(@keyframes)允许开发者定义动画的起始和结束状态,而animation属性则是用来控制这些动画的执行...
在“CSS3高亮显示.zip”这个压缩包中,包含的是关于如何使用CSS3来实现文字高亮和发光特效的知识。下面将详细阐述相关知识点。 首先,我们来看“heightLine.css”文件,这通常是一个CSS样式表,用于控制HTML页面的...
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px} 对图片设置...
2. **缩放进出**:使用`scale()`函数,我们可以让侧边栏在隐藏时缩小至几乎不可见,显示时恢复原大小。例如,初始状态设为`scale(0)`,点击后变为`scale(1)`,导航栏会以缩小再放大的方式出现。 3. **翻转效果**:...
同时,考虑到兼容性问题,使用jQuery的动画作为备用方案,确保在不支持CSS3的浏览器中也能提供良好的用户体验。在实际项目中,这样的实现方式既考虑了现代浏览器的高级特性,又照顾到了那些仍在使用旧版浏览器的用户...
在网页设计领域,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是"延迟放大显示"效果。这个效果通常用于创建视觉吸引力,使元素在页面加载时逐渐显现,增加用户的交互体验。本文将深入探讨...
下面我们将深入探讨如何在HTML中显示LED数字以及相关的CSS样式。 首先,HTML部分主要是构建数字的基础结构。每个LED数字可以由多个div元素组成,每个div代表一个像素或LED灯。例如,一个简单的数字"1"可能由三个...
CSS自定义鼠标显示的形状,CSS自定义鼠标显示的形状
css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) -webkit-line-clamp:2; /...
大图元素可以是隐藏的,如`<div>`内嵌大图片或者使用`<img>`标签,并通过CSS设置`display:none`使其默认不可见。 ```html ;"> ``` 2. **CSS样式**:接下来,我们使用CSS来定义小图和大图的样式。小图...
本文将基于“关于图片显示问题的CSS总结”这一主题,深入探讨CSS在处理图片显示时的关键知识点,以帮助开发者更好地理解和解决图片相关的问题。 首先,我们来看CSS中的`background-image`属性,它用于设置元素的...
在CSS3中,绘制不规则图形的方法逐渐变得多样化和实用化。这些技术使得网页设计师能够创造出更为复杂的视觉效果,从而提升用户体验。以下是一些主要的CSS3方法,用于创建不规则图形: 1. **shape-outside属性**:这...