CSS的继承性与优先级

一、CSS的继承性

  在CSS中不可继承的属性:display、margin、padding、border、background、width、min-width、max-width、height、min-height、max-height、overflow、position、left、right、top、bottom、z-index、float、clear、vertical-align、page-break-after、page-break-before等

  所有元素可继承的属性:visibility和cursor

  内联元素可继承的属性:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

  块元素可继承的属性:text-align和text-indent

  列表元素可继承的属性:list-style、list-style-type、list-style-position、list-style-image

  表格元素可继承的属性:border-collapse

二、CSS的优先级

样式的优先级:

多重样式(如果外部样式、内部样式和内联样式同时应用于同一个元素)的情况下,优先级为:内联样式 > 内部样式 > 外部样式 。有个例外的情况,当外部样式位于内部样式的后面时,外部样式将覆盖内部样式

选择器的优先级:

(1)内联样式表的权值最高为1000

(2) id 选择器的权值为100

(3) class 类选择器的权值为10

(4) html 标签选择器的权值为1

一个CSS样式的权值 = 出现的各级别的选择器的权值分别相加;

例如:

在外部CSS文件中或<style>标签中如下定义:

p  {color: red;}    /*一个标签选择器,权值为1*/

div  p {color:  red;}    /*两个标签选择器器,权值为2*/

#te .tt {color:  red;}    /*一个id选择器,一个类选择器,权值为110*/

在某个标签的style属性中如下定义:

p  {color: red;}    /*在内联样式表中定义,一个标签选择器,权值为1001*/

优先级法则:

1、选择器都有一个权值,权值越大越优先;

2、当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

3、创作者的规则高于浏览者,即网页编写者设置的CSS样式的优先级高于浏览器所设置的样式;

4、继承的CSS样式不如后来指定的CSS样式;

5、在同一组属性中标有“!important”规则的优先级最大;

例如:

//css
p {color:red;}
#test p {color:green;}

//html
<p>test1</p>
<div id="test"><p>test2</p></div>

  结果如下:

  

时间: 2024-10-21 13:56:17

CSS的继承性与优先级的相关文章

CSS的继承与优先级

CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都是body的后代元素 从各元素的关系上分析:各元素之间有如下几种关系: E F 后代关系 E>F 父子关系 E,F (E,可以是任意的元素类型,可以跨级) E+F 相邻关系 详细说明: HTML文档是一种树状的结构.各元素之间有一定的层级关系.这种关系同样反映在CSS中. CSS中,内层元素将继承外层元

css的继承性

为了减少css的代码量,很多时候,我们必须要非常重视css的继承性 1.首先,有些属性是不能继承的.这没有任何原因,只是因为它就是这么设置的.举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性.多数边框类属性,比如象padding(补白),margin(边界),背景和边框的属性都是不能继承的. 2.继承中容易引起的错误 有时候继承也会带来些错误,比如说下面这条css定义: body{color:blue} 在有些浏览器中这句定义会使除表格之外的文本

CSS样式继承性

原文:CSS样式继承性 CSS样式继承介绍# 外层元素身上的样式会被内层元素所继承. 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式. 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被继承,其余的样式属性不可以被继承. CSS样式继承实践# 外层元素身上的样式会被内层元素所继承,这句话的实践. 代码块 Copy <!DOCTYPE html> <html lang="en"> <head> <meta

0017 CSS 三大特性:层叠性、继承性、优先级

目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 原则: 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠 CSS层叠性最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上. 5.2

CSS具有继承性、特殊性、层叠性和重要性

1. 继承性 CSS的某些样式是具有继承性的,那么什么是继承呢? 继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代. 比如下面代码:如某种颜色应用于 p 标签,这个颜色设置不仅应用 p 标签,还应用于 p 标签中的所有子元素文本,这里子元素为 span 标签.   <span style="font-size: 18px;">p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span

css的选择器的优先级

css覆盖是在打代码的时候,开发者很普通很普通,也是很经常经常用到的,但是容易混淆他们之间的优先级. [][][] 第一个是id,第二个是class,第三个是元素名.有一个就加一.比较这个三位数的大小,越大优先级越高. 比如: .content div{} 这个选择器有一个class,一个元素标签,所以这三位数就是011: 再比如: #content div{} 此时就是一个id,一个元素标签,此时就是101: 说明第二个选择器是可以覆盖第一个的相同的属性的值的.

CSS的继承性和层叠性

1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被继承. 2.层叠性  :是CSS处理冲突的能力. 所有的权重计算,没有任何兼容问题! CSS像艺术家一样优雅,像工程师一样严谨. 有冲突的时候就要计算权重,根据权重去选择.权重计算:id的数量,类的数量,标签的数量. 如果权重一样,谁写在后边谁决定样式.继承对权重的影响为0.在开始数权重的时候,一定

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

CSS权重及样式优先级问题

CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择器,所以 B.C.D 的值都为 0,即 A=1, B=0, C=0, D=0(简写为 1,0,0,0,下同). (2)B 表示规则中 ID 的数量:(如,#header 这样的选择器,计算为 0, 1, 0, 0). (3)C 表示规则中除了 ID.标签和伪元素以外的其它选择器数量,包括类选择器.属