选择器一样的情况下后面的会覆盖前面的属性。比如:
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(Cascading Style Sheets)是一种用于描述网页文档布局的语言,主要用于控制HTML或XML等文档中的元素显示样式。初学者往往会觉得CSS非常简单直观,但实际上,随着对CSS掌握...
CSS优先级是网页设计中一个至关重要的概念,它决定了浏览器如何解析和应用样式规则,从而影响页面元素的呈现。在深入探讨优先级之前,我们先简单回顾一下CSS的基础。CSS,全称为层叠样式表(Cascading Style Sheets...
### CSS优先级冲突:终极解决指南 在前端开发过程中,CSS(Cascading Style Sheets,层叠样式表)是必不可少的一项技术。它不仅能够帮助设计师和开发者控制网页的布局、颜色、字体等视觉特性,还能通过媒体查询实现...
### CSS优先级与!important属性详解 #### CSS优先级的基本规则 在CSS中,样式表的优先级决定了元素最终采用哪一套样式。理解CSS优先级的基本规则对于开发人员来说至关重要,尤其是在处理复杂的页面布局时。 1. **...
CSS优先级的规则基于几个原则,主要包括特殊性的权重计算和选择器类型的区分。特殊性是一个量度,用以表示某个CSS规则相对于其他规则的优先级权重,用一组数字来表示(通常是三位数,但在CSS 2.1中使用四位数)。...
CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面...
CSS优先级是CSS样式在浏览器解析时遵循的一种规则,用于决定当同一个元素受到多个样式声明影响时,哪个样式生效。CSS优先级的概念是基于选择器的特殊性(Specificity),这是一个计算不同规则权重的系统。 首先,...
本讲座主要关注CSS的高级特性,特别是层叠性和继承性,以及CSS优先级的概念。 首先,层叠性和继承性是CSS的核心特性。层叠性指的是当一个元素上应用了多个CSS样式时,浏览器会根据一定的规则决定显示哪个样式。这...
CSS优先级由选择器的特定值决定,计算方式是:内联样式(1000)> ID选择器(0100)> 类、属性和伪类(0010)> 标签和伪元素(0001)。多个选择器组合时,优先级相加。 5. **如何实现响应式设计?** 响应式设计...
6. **CSS优先级**:理解CSS的优先级规则也是必要的,内联样式、内部样式表和外部样式表的权重不同,以及ID选择器、类选择器和标签选择器的优先级关系,可以帮助开发者精确控制样式应用。 7. **盒模型**:CSS盒模型...
important` 是一个强大的工具,用于解决CSS优先级的问题,特别是在处理外部和内联样式冲突时。然而,明智地使用它是非常重要的,以保持CSS代码的可维护性和清晰度。在实际项目中,应该尽量通过改进选择器结构来解决...
总结起来,解决CSS优先级问题的关键在于理解样式距离、选择器权重计算和继承机制。在编写CSS时,应合理运用这些知识,以确保样式按照预期工作。对于复杂的样式覆盖情况,可以利用开发者工具查看计算后的优先级,以...
【CSS特性源码_01】是一份关于CSS(层叠样式表)特性的学习资料,其中包含了多个源代码示例。从描述中我们可以推测,这份资料可能是从一本关于CSS的专业书籍中摘录出来的,目的是为了帮助读者更好地理解和掌握CSS的...
5. **层叠与继承**:CSS的层叠机制决定了不同规则之间的优先级,而继承则允许子元素继承父元素的某些样式。了解`!important`的使用可以帮助解决样式冲突问题。 6. **响应式设计**:利用媒体查询(`@media`),...
5. **CSS优先级**: CSS的层叠特性意味着不同的规则可能同时适用于一个元素,最终应用的样式取决于其优先级。内联样式(如`style`属性)优先级最高,接着是ID选择器,然后是类和属性选择器,最后是元素选择器。 6....
在这个测试页中,我们专注于HTTP/2的优先级特性,它是优化网络资源加载的关键部分。本文将深入探讨HTTP/2优先级的工作原理,以及如何在服务器和浏览器端进行测试。 HTTP/2引入了流的概念,每个请求或响应都通过一个...
### CSS三大特性详解 #### 一、层叠性 **定义**:层叠性是指在CSS中,当多个样式应用于同一个HTML元素时,如果这些样式中有冲突的部分,则其中一个样式会覆盖其他的样式。这一特性主要是为了处理样式之间的冲突。 ...
本课件主要探讨了CSS的三大核心特性:层叠性、继承性和优先级。 1. **层叠性**: CSS的层叠性意味着可以为同一个元素定义多个样式,并且这些样式会按照一定的规则叠加在一起。例如,如果在内联样式中设置`<p>`标签...
HTML5/CSS3 面试题及答案 - CSS 篇 ...本文档旨在提供一个详细的 CSS 知识点总结,涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面,以便帮助读者更好地理解和掌握 CSS 的知识点。
3. 层叠规则:理解CSS的优先级和层叠规则,如何覆盖默认样式。 4. 布局技术:包括浮动布局、定位布局、Flexbox和Grid布局,这些都是现代网页布局的基础。 5. 可访问性:学习如何编写符合无障碍标准的CSS,确保所有...