`
ningzhisheng
  • 浏览: 12248 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程17 CSS的优先级特性Specificity

阅读更多
如果同个元素有两个或以上冲突的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中,选择器优先级顺序是决定多个样式冲突时哪个样式生效的关键因素。它涉及到特殊性(Specificity)和重要性(!important)这两个概念。理解并熟练掌握这些规则对于编写高效且易于维护的CSS代码至关重要。 ...

    CSS 优先级 详细分析

    CSS优先级是网页设计中一个至关重要的概念,它决定了浏览器如何解析和应用样式规则,从而影响页面元素的呈现。在深入探讨优先级之前,我们先简单回顾一下CSS的基础。CSS,全称为层叠样式表(Cascading Style Sheets...

    CSS优先级算法如何计算?有哪些判定规定及计算方式

    关于CSS specificity CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的...1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。 如:<div xss=removed>sj

    CSS特异性:掌握样式优先级的艺术

    特异性(Specificity)是指CSS选择器对样式规则的影响程度。当多个CSS规则应用到同一个HTML元素上时,特异性较高的规则将被优先执行。因此,理解特异性对于确保样式正确地按照预期呈现至关重要。 #### 二、特异性的...

    CSS3视频教程 1 CSS3介绍

    10. **选择器层级与层叠规则**:CSS3中的层叠上下文(cascading)和优先级规则(specificity)帮助开发者管理样式冲突,确保样式按预期应用。 总的来说,CSS3不仅增强了网页的视觉效果,还简化了布局和动画的设计,...

    CSS高级教程

    5. **CSS优先级 (CSS Specificity)**:CSS优先级决定了哪些样式会被应用。具体顺序为:行内样式 > ID选择器 > 类/属性/伪类选择器 > 元素选择器。当多个规则冲突时,优先级高的规则生效。理解这个概念有助于控制样式...

    div+css 网站实例 教程 css布局

    优先级由选择器的特异性(specificity)、继承(inheritance)和声明顺序(order)共同决定。 **响应式设计** 响应式设计使网页能在不同设备上提供优化的用户体验。通过媒体查询(`@media`),我们可以针对不同屏幕尺寸和...

    CSS教程:优先级问题的考虑实例

    本教程将深入探讨CSS优先级的问题,帮助你理解和解决实际开发中可能出现的冲突。 首先,我们需要了解CSS规则的层次结构。在默认情况下,后定义的规则会覆盖之前定义的同级规则。例如,如果你为`<p>`元素设置了两个...

    网页css优先级为您详细解读

    CSS优先级的规则基于几个原则,主要包括特殊性的权重计算和选择器类型的区分。特殊性是一个量度,用以表示某个CSS规则相对于其他规则的优先级权重,用一组数字来表示(通常是三位数,但在CSS 2.1中使用四位数)。...

    CSS特性源码_01

    5. **层叠与优先级(Cascading and Specificity)**:CSS的“层叠”是指当存在多个规则时,如何确定哪个规则生效。具体性(Specificity)则是决定层叠顺序的一个关键因素,通过计算选择器的权重来确定优先级。 6. *...

    CSS培训教程共14页.pdf.zip

    【CSS培训教程共14页.pdf.zip】是一个压缩文件,其中包含了有关CSS(Cascading Style Sheets)的培训教程。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制网页的布局...

    CSS2.0,CSS,CSS样式

    CSS2.0引入了更复杂的层叠规则,包括继承、特异性(specificity)和优先级。 3. **盒模型**:CSS2.0定义了盒模型,每个HTML元素都被视为一个矩形盒子,包含内容区、内边距、边框和外边距。这种模型对布局设计至关...

    CSS中文教程

    6. **选择器优先级**:理解CSS的优先级规则,包括继承、特定性(specificity)和!important声明,这对于控制样式冲突至关重要。 7. **CSS预处理器**:介绍Sass、Less等预处理器,它们提供变量、嵌套规则、混合等...

    很漂亮的css布局 CSS大集合

    8. **样式层叠**:CSS的名称中“级联”意味着样式可以从多个来源继承和合并,优先级根据来源的特异性(specificity)和权重决定,理解这一点能避免样式冲突。 9. **预处理器与后处理器**:如Sass(SCSS)和Less是...

    曹鹏CSS视频教程-57.冲突与具体性比较 3.rar

    具体性(Specificity)是CSS中用于确定哪些规则优先级更高的机制。它基于选择器的类型:ID选择器、类选择器、属性选择器和元素选择器等。具体性越高,规则的优先级也就越高。例如,一个ID选择器比一个类选择器更具体...

    css.rar_css

    2. **层叠原理**:CSS的“层叠”特性意味着当多个样式规则应用于同一个元素时,它们将按照优先级进行叠加。这涉及到特异性(specificity)、继承(inheritance)和源顺序(cascade),以确定最终应用的样式。 3. **...

    CSS样式定义的优先级顺序介绍

    在CSS(层叠样式表)中,样式定义的优先级是非常关键的概念,它决定了当多个样式规则同时作用于一个元素时,哪个规则会被应用。理解这个优先级顺序有助于开发者更精确地控制页面的呈现效果。下面我们将深入探讨CSS...

    曹鹏CSS视频教程-56.冲突与具体性比较 2.rar

    具体性(Specificity)是CSS中用于确定哪个选择器优先级更高的一种机制。具体性计算基于选择器的类型,ID选择器权重为100,类、属性和伪类权重为10,标签和伪元素权重为1,而通用选择器、子选择器、相邻兄弟选择器等...

    css三大特性.pptx

    #### 三、优先级(Specificity) **定义**:优先级是指在CSS中,当多个选择器应用于同一个HTML元素时,CSS引擎如何决定哪个选择器的样式会被应用。不同的选择器有不同的权重值,这些权重值决定了它们的优先级。 **...

Global site tag (gtag.js) - Google Analytics