精通css(3)-优先级那些事儿

同一个元素可能会有多个样式,这些样式很可能会冲突,css通过层叠的过程来处理这种冲突,简单的说就是给每个规则分配一个重要度。

1.层叠

层叠重要度从高到低排列顺序:

1.标有!important的用户样式;

2.标有!important的作者样式;

3.作者样式;

4.用户样式;

5.浏览器/用户代理默认样式;

2.优先级的计算

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。直接在网页中用sytle="...."的优先级最高,为1000,但是不推荐这样用,你懂的。举个例子:

    div.test1 .span p{...} 优先级= 1+10 +10 +1
    span#xxx .songs li {...}优先级=1+100 + 10 + 1
    #xxx li {...}优先级= 100 +1 

另外,伪元素的优先值同html 其他元素,伪类的优先值与类的计算一样,还有类似["id=content"]这样的选择器,也跟类的级别一样。

3.继承

继承就是应用样式的元素后代会继承样式的某些属性。这句话很容易理解,但是"某些属性"有些坑啊,你特么到底是哪些属性啊?

首先要明确一点:直接应用于元素的任何样式都会覆盖继承而来的属性。比如你对body设置了font-size:10px;的属性,但是h1,h2都不听你的,因为浏览器默认给h1,h2设置了字体大小,覆盖了继承而来的样式。

然后网页中用到的继承大多都是文本方面的继承,比如font-size,font-color之类的。边框类的属性是不能继承的,比如border,margin,padding什么的,这个要是能继承网页就完蛋了。

有些浏览器在继承方面还有些问题,比如说高贵冷艳的IE,在继承表格字号方面会有些问题。总的来说,在写代码的时候除了文本继承外,其他的都不要指望用继承了,直接用选择器会更好些。

时间: 2024-10-27 18:32:26

精通css(3)-优先级那些事儿的相关文章

!important在ie6下的一个BUG和CSS的优先级。

在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的. 一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢

精通CSS+DIV网页样式与布局--图片效果

        提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:         精通CSS+DIV网页样式与布局--初探CSS        精通CSS+DIV网页样

精通css(6)-图像背景那些事儿

1.背景图像 先说一下background的用法. 通常使用简写形式:background:背景色 背景图 重复方式 定位方式  图像位置,比如background: #00FF00 url(bgimage.gif) no-repeat fixed top; background-position有center属性,可以让背景居中. 如果使用像素对背景定位,如background-position:20px 20px:位置是从父元素左上角到图像左上角算的.如果使用百分比,如background-

CSS样式优先级计算方法

  一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍不同的CSS规则. 二.为什么要研究CSS优先级?CSS优先级与门户系统有什么关系? 研究CSS优先级的主要目的就是解决多个CSS选择符选中同一个元素时的冲突问题.在门户系统中,为了保证所有的页面能正常展示,几乎所有的微件及页面都有基础CSS样式,但是门户系统是开放的.个性化的平台,大部分样式都给予了用户修改权,这时自定义样式和门户基本样式

精通css(2)-选择器

虽然这东西很简单,但是这是最基础的.能把最基础的东西运用自如,就已经是高手了. 选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器.而一般人们将上面这几种方式结合在一起,所以就有了5种或6种选择器了. 1.标签选择器 直接用HTML标签,又叫类型选择器,元素选择器,简单选择器. 2.类选择器 之所以把这一条单

css样式优先级

>>style.html <!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title></title><!-- 引入外部样式 --><link rel="stylesheet" type="text/css" href="css/mai

CSS中优先级问题引起的一些情况

做网站开发前台网页的时候,时不时会碰到一些奇怪的问题,有时还真的莫明其秒.这不,前些日子双碰到一个让我大跌眼镜的问题:wordpress评论回复时不显示,而直接评论能正常显示.开始以为是代码问题,结果不是.因为,在文章中的评论回复是正常显示,而在图集幻灯中的评论就不能显示.这是怎么回事呢? 经过多次查找,终于让我找到问题之所在,如下图: wordpress自动在 children 标签里添加了 style 性性,这样一来,我在主题 style.css 中定义的样式 就不起作用了.晕死.怎么办呢?

精通 CSS 滤镜(二)

css|滤镜 随着网页设计技术的发展,人们已经不满足于原有的一些HTML标记,而是希望能够为页面添加一些多媒体属性,例如滤镜的和渐变的效果.CSS技术的飞快发展使这些需求成为了现实.从现在开始我要为大家介绍一个新的CSS扩展部分:CSS滤镜属性(Filter Properties).使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片.文本容器.以及其他一些对象.对于滤镜和渐变效果,前者是基础,因为后者就是滤镜效果的不断变化和演示更替.当滤镜和渐变效果结合到一个基本的

精通 CSS 滤镜(五)

css|滤镜 上几次给大家具体讲了语法,下面我们来看几个生动的例子!下面这个程序是用light滤镜模拟雷达屏幕,并且有一架飞机被发现.当然编这个程序要对script 比较熟悉,还要知道lighy滤镜的属性和方法.    1.雷达屏幕     在这漆黑的夜里,英雄,你能看到你的美女在哪里吗?什么样子看的清吗,她的那颗炽热跳动的心你能感觉到吗? 可以说本页效果需要一定的JAVASCRIPT基础,属于CSS和JAVASCRIPT的高级运用.     2.动态光源演示-英雄救美女     3.Glow滤