`
zjq_blog
  • 浏览: 50175 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css不显示问题

    博客分类:
  • css
阅读更多
如果页面制作的时候遇到定义的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打印不显示的原因和解决方案。 首先,我们要理解CSS打印与屏幕显示的区别。...

    解决vuejs项目里css引用背景图片不能显示的问题

    解决:build-&gt;utils.js里,修改:增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也

    CSS控制超出范围显示引号.txt

    CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号,CSS控制超出范围显示引号

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    js css实现LCD数字显示

    "js css实现LCD数字显示"这个主题涉及到如何使用JavaScript(js)和层叠样式表(CSS)技术来模拟LCD液晶显示屏上的数字显示效果。液晶显示器(LCD)数字通常用于各种设备,如时钟、仪表盘或简单的用户界面,它们以...

    小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法

    总之,解决`scroll-view`与CSS左右滑动超出部分背景颜色不显示的问题,需要对小程序的渲染机制、CSS布局以及滚动条样式有深入的理解。通过细致的排查和合理的代码编写,可以确保用户在滑动浏览时获得良好的视觉体验...

    css中文显示

    在处理中文字符时,可能会遇到各种问题,如乱码、字体不正确或者显示不全等。下面我们将详细探讨如何使用CSS确保网页中的中文能够正确、美观地呈现。 首先,我们要理解浏览器是如何处理字符编码的。在HTML或CSS文件...

    CSS3高亮显示.zip

    在“CSS3高亮显示.zip”这个压缩包中,包含的是关于如何使用CSS3来实现文字高亮和发光特效的知识。下面将详细阐述相关知识点。 首先,我们来看“heightLine.css”文件,这通常是一个CSS样式表,用于控制HTML页面的...

    css3实现多个元素依次显示效果

    这篇文章主要介绍了如何使用CSS3中的@keyframes和animation属性来实现多个元素依次显示的效果。具体来说,关键帧动画(@keyframes)允许开发者定义动画的起始和结束状态,而animation属性则是用来控制这些动画的执行...

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

     原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。  二、使用布局技术  使用CSS3 圆角技术实现。  使用CSS3样式单词:border-radius  语法:  div{border-radius:5px}  对图片设置...

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    2. **缩放进出**:使用`scale()`函数,我们可以让侧边栏在隐藏时缩小至几乎不可见,显示时恢复原大小。例如,初始状态设为`scale(0)`,点击后变为`scale(1)`,导航栏会以缩小再放大的方式出现。 3. **翻转效果**:...

    jquery+css3渐变显示“更多”隐藏内容

    同时,考虑到兼容性问题,使用jQuery的动画作为备用方案,确保在不支持CSS3的浏览器中也能提供良好的用户体验。在实际项目中,这样的实现方式既考虑了现代浏览器的高级特性,又照顾到了那些仍在使用旧版浏览器的用户...

    css3延迟放大显示

    在网页设计领域,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是"延迟放大显示"效果。这个效果通常用于创建视觉吸引力,使元素在页面加载时逐渐显现,增加用户的交互体验。本文将深入探讨...

    led数字样式css,html显示led数字

    下面我们将深入探讨如何在HTML中显示LED数字以及相关的CSS样式。 首先,HTML部分主要是构建数字的基础结构。每个LED数字可以由多个div元素组成,每个div代表一个像素或LED灯。例如,一个简单的数字"1"可能由三个...

    CSS自定义鼠标显示的形状

    CSS自定义鼠标显示的形状,CSS自定义鼠标显示的形状

    CSS文本超出2行就隐藏并且显示省略号

    css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) -webkit-line-clamp:2; /...

    CSS鼠标移上去显示大图

    大图元素可以是隐藏的,如`&lt;div&gt;`内嵌大图片或者使用`&lt;img&gt;`标签,并通过CSS设置`display:none`使其默认不可见。 ```html ;"&gt; ``` 2. **CSS样式**:接下来,我们使用CSS来定义小图和大图的样式。小图...

    关于图片显示问题的CSS总结

    本文将基于“关于图片显示问题的CSS总结”这一主题,深入探讨CSS在处理图片显示时的关键知识点,以帮助开发者更好地理解和解决图片相关的问题。 首先,我们来看CSS中的`background-image`属性,它用于设置元素的...

    CSS3绘制不规则图形的一些方法示例

    在CSS3中,绘制不规则图形的方法逐渐变得多样化和实用化。这些技术使得网页设计师能够创造出更为复杂的视觉效果,从而提升用户体验。以下是一些主要的CSS3方法,用于创建不规则图形: 1. **shape-outside属性**:这...

Global site tag (gtag.js) - Google Analytics