权值:通配符*的权值为0,标签和伪元素的权值为1,类选择符,属性选择器或伪类的权值为10,ID选择符的权值为100,内联样式最高为1000。还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1有的认为没有权值,所以可以理解为继承的权值最低(大多数框架模型属性(包括外边距,内边距,背景和边框)都不能继承)。我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,可以使用!important来解决。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,可以使用!important来解决。(!important要写在分号的前面)

p{color:red!important;}
p{color:green;}
/*文本会显示红色*/

权值相等的情况下:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

CSS--基础结构层叠的更多相关文章

  1. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...

  2. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  3. CSS继承性+层叠性+盒子+浮动

        CSS继承性+层叠性+盒子+浮动 CSS继承性 <style>         div{             color: pink;             font-siz ...

  4. 关于css的层叠上下文和层叠顺序问题

    关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...

  5. 纯js轮播图练习-2,js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  6. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

  7. 【CSS】我的颜色到底听谁的?—— css的层叠性

    我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...

  8. 深入解析CSS样式层叠权重值

    本文为转载内容,源地址:http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到<重新认识CSS的权重>这篇,在文章最 ...

  9. CSS中层叠和继承的概念。

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...

  10. CSS和层叠

    ##常见的CSS属性## color:red  设置元素内容的颜色 <br>text-align:center  设置文字的对齐方式(例:centeer 居中) <br>fon ...

随机推荐

  1. NOIp2016 蚯蚓 【二叉堆/答案单调性】By cellur925

    题目传送门 $Sol$ $50pts$:我们考虑$q==0$的情况,每次在所有的蚯蚓中找到一只长度最大的,这非常二叉堆.所以我们可以用一个优先队列,随便水一下就有50分.($NOIp$的分真这么好拿? ...

  2. css - 单词的自动换行问题

    转载自:解决文档中有url链接时被强制换行的问题 问题 当行内出现很长的英文单词或者url的时候,会出现自动换行的问题,为了美化页面,往往会希望这些很长的英文单词或者url能够断开来,超出的部分换行到 ...

  3. 水题 Codeforces Round #299 (Div. 2) A. Tavas and Nafas

    题目传送门 /* 很简单的水题,晚上累了,刷刷水题开心一下:) */ #include <bits/stdc++.h> using namespace std; ][] = {" ...

  4. DNS练习之正向解析

    配置正向解析: 主机名:sishen63 主机IP:192.168.1.63 操作系统:Red Hat Enterprise Linux Server release 6.5 (Santiago) 安 ...

  5. AJPFX分享eclipse自动生成java注释方法

    设置方法介绍:eclipse中:Windows->Preferences->Java->Code Style->Code Template->Comments,然后对应的 ...

  6. CF962E Byteland, Berland and Disputed Cities

    思路: http://codeforces.com/blog/entry/58869. 实现: #include <bits/stdc++.h> using namespace std; ...

  7. let块级引起的闭包思考

    因为es6在node中用的比较频繁,最近在按计划根据阮一峰的es6教程从头开始学习一遍, 第一步遇到的就是“看似非常熟悉”的let小伙伴,核心character如下: 即:let变量的作用域只在块内. ...

  8. 一个Java编写的小玩意儿--脚本语言解释器(一)

    今天开始想写一个脚本语言编译器.在这个领域,我还是知道的太少了,写的这个过程肯定是艰辛的,因为之前从来没有接触过这类的东西.写在自己的博客里,算是记录自己的学习历程吧.相信将来自己有幸再回过头来看到自 ...

  9. 最简单的教程:在Ubuntu操作系统里安装Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  10. 微信小程序开发系列四:微信小程序之控制器的初始化逻辑

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...