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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值