如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如:
Example Source Code [www.52css.com]
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色,因为遵循后面的规则。
然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:
Example Source Code [www.52css.com]
div p { color: red; }
p { color: blue; }
也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。
Example Source Code [www.52css.com]
p的特性是1(一个html选择器)
div p的特性是2(两个html选择器)
.tree的特性是10(1个class选择器)
div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)
#baobab的特性是100(1个ID选择器)
body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)
按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。
它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如:
Example Source Code [www.52css.com]
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色,因为遵循后面的规则。
然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:
Example Source Code [www.52css.com]
div p { color: red; }
p { color: blue; }
也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。
Example Source Code [www.52css.com]
p的特性是1(一个html选择器)
div p的特性是2(两个html选择器)
.tree的特性是10(1个class选择器)
div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)
#baobab的特性是100(1个ID选择器)
body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)
按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。
发表评论
-
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 684伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 722At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 834使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 756操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 952背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 658一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 608请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 464Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 668前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 716如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 624CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 617margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1080css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 682CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
在CSS中,选择器优先级顺序是决定多个样式冲突时哪个样式生效的关键因素。它涉及到特殊性(Specificity)和重要性(!important)这两个概念。理解并熟练掌握这些规则对于编写高效且易于维护的CSS代码至关重要。 ...
CSS优先级是网页设计中一个至关重要的概念,它决定了浏览器如何解析和应用样式规则,从而影响页面元素的呈现。在深入探讨优先级之前,我们先简单回顾一下CSS的基础。CSS,全称为层叠样式表(Cascading Style Sheets...
关于CSS specificity CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的...1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。 如:<div xss=removed>sj
特异性(Specificity)是指CSS选择器对样式规则的影响程度。当多个CSS规则应用到同一个HTML元素上时,特异性较高的规则将被优先执行。因此,理解特异性对于确保样式正确地按照预期呈现至关重要。 #### 二、特异性的...
10. **选择器层级与层叠规则**:CSS3中的层叠上下文(cascading)和优先级规则(specificity)帮助开发者管理样式冲突,确保样式按预期应用。 总的来说,CSS3不仅增强了网页的视觉效果,还简化了布局和动画的设计,...
5. **CSS优先级 (CSS Specificity)**:CSS优先级决定了哪些样式会被应用。具体顺序为:行内样式 > ID选择器 > 类/属性/伪类选择器 > 元素选择器。当多个规则冲突时,优先级高的规则生效。理解这个概念有助于控制样式...
优先级由选择器的特异性(specificity)、继承(inheritance)和声明顺序(order)共同决定。 **响应式设计** 响应式设计使网页能在不同设备上提供优化的用户体验。通过媒体查询(`@media`),我们可以针对不同屏幕尺寸和...
本教程将深入探讨CSS优先级的问题,帮助你理解和解决实际开发中可能出现的冲突。 首先,我们需要了解CSS规则的层次结构。在默认情况下,后定义的规则会覆盖之前定义的同级规则。例如,如果你为`<p>`元素设置了两个...
CSS优先级的规则基于几个原则,主要包括特殊性的权重计算和选择器类型的区分。特殊性是一个量度,用以表示某个CSS规则相对于其他规则的优先级权重,用一组数字来表示(通常是三位数,但在CSS 2.1中使用四位数)。...
5. **层叠与优先级(Cascading and Specificity)**:CSS的“层叠”是指当存在多个规则时,如何确定哪个规则生效。具体性(Specificity)则是决定层叠顺序的一个关键因素,通过计算选择器的权重来确定优先级。 6. *...
【CSS培训教程共14页.pdf.zip】是一个压缩文件,其中包含了有关CSS(Cascading Style Sheets)的培训教程。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制网页的布局...
CSS2.0引入了更复杂的层叠规则,包括继承、特异性(specificity)和优先级。 3. **盒模型**:CSS2.0定义了盒模型,每个HTML元素都被视为一个矩形盒子,包含内容区、内边距、边框和外边距。这种模型对布局设计至关...
6. **选择器优先级**:理解CSS的优先级规则,包括继承、特定性(specificity)和!important声明,这对于控制样式冲突至关重要。 7. **CSS预处理器**:介绍Sass、Less等预处理器,它们提供变量、嵌套规则、混合等...
8. **样式层叠**:CSS的名称中“级联”意味着样式可以从多个来源继承和合并,优先级根据来源的特异性(specificity)和权重决定,理解这一点能避免样式冲突。 9. **预处理器与后处理器**:如Sass(SCSS)和Less是...
具体性(Specificity)是CSS中用于确定哪些规则优先级更高的机制。它基于选择器的类型:ID选择器、类选择器、属性选择器和元素选择器等。具体性越高,规则的优先级也就越高。例如,一个ID选择器比一个类选择器更具体...
2. **层叠原理**:CSS的“层叠”特性意味着当多个样式规则应用于同一个元素时,它们将按照优先级进行叠加。这涉及到特异性(specificity)、继承(inheritance)和源顺序(cascade),以确定最终应用的样式。 3. **...
在CSS(层叠样式表)中,样式定义的优先级是非常关键的概念,它决定了当多个样式规则同时作用于一个元素时,哪个规则会被应用。理解这个优先级顺序有助于开发者更精确地控制页面的呈现效果。下面我们将深入探讨CSS...
具体性(Specificity)是CSS中用于确定哪个选择器优先级更高的一种机制。具体性计算基于选择器的类型,ID选择器权重为100,类、属性和伪类权重为10,标签和伪元素权重为1,而通用选择器、子选择器、相邻兄弟选择器等...
#### 三、优先级(Specificity) **定义**:优先级是指在CSS中,当多个选择器应用于同一个HTML元素时,CSS引擎如何决定哪个选择器的样式会被应用。不同的选择器有不同的权重值,这些权重值决定了它们的优先级。 **...