`
sfeve
  • 浏览: 43648 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

CSS的优先级特性

    博客分类:
  • Java
 
阅读更多

选择器一样的情况下后面的会覆盖前面的属性。比如:

  p { color: red; }

  p { color: blue; }

  p元素的元素将是蓝色,因为遵循后面的规则。

  然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:

  div p { color: red; }

  p { color: blue; }

  也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。

  一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。

  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又比它们两个都高

 


转自:http://www.pccode.net/info/2010/10/31/20101031-5645.html

 

 

分享到:
评论

相关推荐

    css优先级总结

    ### CSS优先级总结 #### 一、概述 CSS(Cascading Style Sheets)是一种用于描述网页文档布局的语言,主要用于控制HTML或XML等文档中的元素显示样式。初学者往往会觉得CSS非常简单直观,但实际上,随着对CSS掌握...

    CSS 优先级 详细分析

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

    CSS优先级冲突:终极解决指南

    ### CSS优先级冲突:终极解决指南 在前端开发过程中,CSS(Cascading Style Sheets,层叠样式表)是必不可少的一项技术。它不仅能够帮助设计师和开发者控制网页的布局、颜色、字体等视觉特性,还能通过媒体查询实现...

    css优先级98908u0

    ### CSS优先级与!important属性详解 #### CSS优先级的基本规则 在CSS中,样式表的优先级决定了元素最终采用哪一套样式。理解CSS优先级的基本规则对于开发人员来说至关重要,尤其是在处理复杂的页面布局时。 1. **...

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

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

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

    CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面...

    老调重弹的CSS优先级

    CSS优先级是CSS样式在浏览器解析时遵循的一种规则,用于决定当同一个元素受到多个样式声明影响时,哪个样式生效。CSS优先级的概念是基于选择器的特殊性(Specificity),这是一个计算不同规则权重的系统。 首先,...

    农产品网页美化-CSS高级特性.pptx

    本讲座主要关注CSS的高级特性,特别是层叠性和继承性,以及CSS优先级的概念。 首先,层叠性和继承性是CSS的核心特性。层叠性指的是当一个元素上应用了多个CSS样式时,浏览器会根据一定的规则决定显示哪个样式。这...

    经典的CSS面试题(含答案)

    CSS优先级由选择器的特定值决定,计算方式是:内联样式(1000)> ID选择器(0100)> 类、属性和伪类(0010)> 标签和伪元素(0001)。多个选择器组合时,优先级相加。 5. **如何实现响应式设计?** 响应式设计...

    常用的css模板css

    6. **CSS优先级**:理解CSS的优先级规则也是必要的,内联样式、内部样式表和外部样式表的权重不同,以及ID选择器、类选择器和标签选择器的优先级关系,可以帮助开发者精确控制样式应用。 7. **盒模型**:CSS盒模型...

    css中提升优先级属性!important的用法总结

    important` 是一个强大的工具,用于解决CSS优先级的问题,特别是在处理外部和内联样式冲突时。然而,明智地使用它是非常重要的,以保持CSS代码的可维护性和清晰度。在实际项目中,应该尽量通过改进选择器结构来解决...

    解析CSS编写中的属性优先级问题

    总结起来,解决CSS优先级问题的关键在于理解样式距离、选择器权重计算和继承机制。在编写CSS时,应合理运用这些知识,以确保样式按照预期工作。对于复杂的样式覆盖情况,可以利用开发者工具查看计算后的优先级,以...

    CSS特性源码_01

    【CSS特性源码_01】是一份关于CSS(层叠样式表)特性的学习资料,其中包含了多个源代码示例。从描述中我们可以推测,这份资料可能是从一本关于CSS的专业书籍中摘录出来的,目的是为了帮助读者更好地理解和掌握CSS的...

    css特性源码_02

    5. **层叠与继承**:CSS的层叠机制决定了不同规则之间的优先级,而继承则允许子元素继承父元素的某些样式。了解`!important`的使用可以帮助解决样式冲突问题。 6. **响应式设计**:利用媒体查询(`@media`),...

    CSS,在adf中创建css

    5. **CSS优先级**: CSS的层叠特性意味着不同的规则可能同时适用于一个元素,最终应用的样式取决于其优先级。内联样式(如`style`属性)优先级最高,接着是ID选择器,然后是类和属性选择器,最后是元素选择器。 6....

    HTTP2优先级的测试页服务器和浏览器

    在这个测试页中,我们专注于HTTP/2的优先级特性,它是优化网络资源加载的关键部分。本文将深入探讨HTTP/2优先级的工作原理,以及如何在服务器和浏览器端进行测试。 HTTP/2引入了流的概念,每个请求或响应都通过一个...

    css三大特性.pptx

    ### CSS三大特性详解 #### 一、层叠性 **定义**:层叠性是指在CSS中,当多个样式应用于同一个HTML元素时,如果这些样式中有冲突的部分,则其中一个样式会覆盖其他的样式。这一特性主要是为了处理样式之间的冲突。 ...

    使用HTML开发商业网站-CSS3高级特性课件.pptx

    本课件主要探讨了CSS的三大核心特性:层叠性、继承性和优先级。 1. **层叠性**: CSS的层叠性意味着可以为同一个元素定义多个样式,并且这些样式会按照一定的规则叠加在一起。例如,如果在内联样式中设置`<p>`标签...

    html5css3面试题及答案,前端面试题及答案-CSS篇.docx

    HTML5/CSS3 面试题及答案 - CSS 篇 ...本文档旨在提供一个详细的 CSS 知识点总结,涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面,以便帮助读者更好地理解和掌握 CSS 的知识点。

    css+div布局和css教程和css的api

    3. 层叠规则:理解CSS的优先级和层叠规则,如何覆盖默认样式。 4. 布局技术:包括浮动布局、定位布局、Flexbox和Grid布局,这些都是现代网页布局的基础。 5. 可访问性:学习如何编写符合无障碍标准的CSS,确保所有...

Global site tag (gtag.js) - Google Analytics