CSS--基础结构层叠

权值:通配符*的权值为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;}
/*文本会显示红色*/

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

时间: 2024-11-05 02:41:25

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

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

CSS继承性+层叠性+盒子+浮动 CSS继承性 <style> div{ color: pink; font-size: 30px; width: 500px; background: green; padding: 100px; } p{ color: red; } </style> <div> <p>我们都是好孩子</p> <ul> <li> <p>我们都是栋梁之才</p> </li>

CSS的“层叠”规则的总结

当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下CSS的层叠规则. 概念:CSS中的层叠就是让多个来源的样式叠加在一起,然后结合样式的特殊性(后面详细介绍).继承性,确定最终应用的样式. 样式的来源分五种: 1.浏览器默认的样式: 2.用户自定义样式.一些页面中会提供一些让用户自定义字体大小颜色等的快捷键: 3.外部样式,即<link>引用的CS

1.6 CSS的层叠特性

作为本章的最后一节,这里主要讲解CSS的层叠属性.CSS的全名叫做“层叠样式表”,读者有没有考虑过,这里的“层叠”是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. CSS的层叠特性确实很重要,但是要注意,千万不要和前面介绍的“继承”相混淆,二者有着本质的区别.实际上,层叠可以简单地理解为“冲突”的解决方案. 例如有如下一段代码,示例文件位于网页学习网CSS教程资源“第1章\16.htm”. <html> <head> <title>层叠特性</titl

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

大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成前台网页制作.小强老师是这样分类的,前几次课,我们将CSS+DIV入门基础,后几天课程我们讲案例制作.咱们接下来讲的是css基础部分. 高清视频地址如下: 01  css语法规范:                       http://www.tudou.com/programs/view/8s

css的层叠性(权重问题)

1.css的层叠性(很多公司如果要是有笔试,一定会考层叠性) 解释:就是css处理冲突问题的能力. 特点:所有的权重计算没有任何兼容性问题. 2.权重计算问题 下面我们看一下这个代码 <!DOCTYPE html> <html> <head> <title>权重计算问题</title> <meta charset="utf-8"> <style type="text/css"> /*

深入解析CSS样式层叠权重值(转)

前言:折腾了半天圆角,发觉border-radius是css3的新特性,简单粗暴的解决了button的圆角显示,中间由于css权重问题,导致即使我设置了圆角也一直没有生效.以下是找到的相当不错的一篇css样式权重讲解的,清晰明了,看完就懂是啥了. 永记在心: important > 内联 > ID > 类|属性|伪类 > 标签|伪元素  > 通配符 > 继承  (相对于原文的调整  属性选择和为对象均与类并列~) 简单记住这几个就够用了: important >

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

关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮住了,百思不得解,谷歌了白天,才知道是层叠上下文.层叠顺序搞得鬼,所以这里把搜索的结果记下来,帮自己,也帮能够看到的盆友. 这里贴出一个解释很详细的地址,要是看了不太明白的,可以戳这里哦 首先层叠上下文是什么鬼呢? 层叠上下文,英文称作"stacking context". 是HTML中的

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

本文为转载内容,源地址:http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到<重新认识CSS的权重>这篇,在文章最后给出了便于记忆的顺序: “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”. 那么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很

css的层叠性+继承性+优先级+权重

一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继承性 1.在浏览器的样式栏显示的是inherited from xxx 2.可以继承的属性:1>文本颜色(color:) 2>以font-开头的属性(font-family font-size font-weight)3>以line-开头的(line-height ) 4>以text-

CSS和层叠

##常见的CSS属性## color:red  设置元素内容的颜色 <br>text-align:center  设置文字的对齐方式(例:centeer 居中) <br>font-size  设置文字大小 <br>font-weight:  设置文字粗细 <br>background:  设置文字背景颜色 ##通配选择器## 写法:*{} <br>通配选择器会选择body中所有内容. ##伪类选择器## 写法:.weilei{}=>.wei