CSS特殊性

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

l  第一等:代表内联样式,如: style=””,权值为1000。

l  第二等:代表ID选择器,如:#content,权值为0100。

l  第三等:代表类,伪类和属性选择器,如.content,权值为0010。—

l  第四等:代表类型选择器和伪元素选择器,如div  p,权值为0001。—a:first-letter{color:red;}  —div{color:red;}

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

时间: 2024-11-05 12:33:33

CSS特殊性的相关文章

CSS特殊性值

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 h1 { color: red; } /* 0, 0, 0, 1*/ 9 body h1 { color: green; } /* 0, 0, 0, 2*/ 10

记录:CSS特殊性——权值规则

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:

css 特殊性 权重排列

首先类似于十进制的理解. 0010大于0001. id = 0,1,0,0; class, [属性值],:伪类 = 0,0,1,0: <元素>,:伪元素/*:before ,:after,:first-line,:first-letter*/ = 0,0,0,1: * = 0,0,0,0(大于继承值); !important; 就像 1,0,0,0: 如果权重一样,越在后面声明的,权重越大. 且:继承值没有特殊性

CSS Specificity(特殊性)

CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结. CSS的特殊性(specificity)也可以称为CSS的优先级或权值:对于每个样式表规则,浏览器都会计算选择器的特殊性,从而使元素属性声明在有冲突的情况下能够正确显示. 特殊性的描述可以把它看成一个4位数: 0.0.0.0 ,数值越大的特殊性越高(例如:0.1.0.0>0.0.1.2),也是最终浏览器显示的效果.

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

CSS从入门到精通1.md

CSS的发展历程 从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制.最初的HTML只包含很少的显示属性. 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿.于是CSS便诞生了. CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内

css知识总结

---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握CSS三种显示模式> 6. 熟练掌握CSS背景属性> 7. 熟练掌握CSS三大特性> 8. 熟练掌握CSS盒子模型> 9. 熟练掌握CSS浮动> 10.熟练掌握CSS定位> 11.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media---

web前端入门到实战:编写CSS代码的8个策略,资深开发工程师总结

编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解. 在我和我们团队的观念中,编写可维护的前端代码非常重要.尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人.仅仅因为你的一次性元素和配置对你有意义,并不意味着它们对下一个可能继承应用程序的人有意义. 为了防止这篇文章太长