php网站搬家软件,net可以开发wordpress,3d设计软件有哪些,网站开发费用预算[css] 说说CSS的优先级是如何计算的#xff1f;
选择器种类严格来讲#xff0c;选择器的种类可以分为三种#xff1a;标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入 style 的方式…[css] 说说CSS的优先级是如何计算的
选择器种类严格来讲选择器的种类可以分为三种标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入 style 的方式应该是CSS的一种引入方式而不是选择器因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起所 以就有了5种或6种选择器了。三种基本的选择器类型
语法如下
◆标签名选择器如p{}即直接使用HTML标签作为选择器。
◆类选择器如.polaris{}。
◆ID选择器如#polaris{}。伪类属性选择器特指度等同于类
伪元素特指度等同于标签名选择器扩展选择器
◆后代选择器如 .polaris span img{}后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
◆群组选择器如 div,span,img{}群组选择器实际上是对CSS的一种简化写法只不过把有相同定义的不同选择器放在一起省了很多代码。
特指度-优先级计算我们需要引入一个概念——特指度specificity。特指度表示一个css选择器表达式的重要程度可以通过一个公式来计算出一个数值数越大越重要。
这个计算叫做“I-C-E”计算公式I——Id
C——Class
E——Element即针对一个css选择器表达式遇到一个id就往特指度数值中加100遇到一个class就往特指度数值中加10遇到一个element就往特指度数值中加1。下面举几个css表达式的特指度计算结果大家也自己算一算是不是对的
这里写图片描述还有一个重点要注意!important 优先级最高高于上面一切。* 选择器最低低于一切。
后代选择器的定位原则在这里介绍一下对于后代选择器浏览器是如何查找元素的呢浏览器CSS匹配不是从左到右进行查找而是从右到左进行查找。比如div#divBox p span.red{color:red;}浏览器的查找顺序如下先查找html中所有 classred 的 span 元素找到后再查找其父辈元素中是否有 p 元素再判断 p 的父元素中是否有 id 为 divBox 的 div 元素如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
简洁、高效的CSS所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找下面列出一些我们常见的写CSS犯一些低效错误◆不要在ID选择器前使用标签名
一般写法div#divBox
更好写法#divBox
解释 因为ID选择器是唯一的加上 div 反而增加不必要的匹配。◆不要再class选择器前使用标签名
一般写法span.red
更好写法.red
解释同第一条但如果你定义了多个.red而且在不同的元素下是样式不一样则不能去掉比如你css文件中定义如下p.red{color:red;}
span.red{color:#ff00ff} 如果是这样定义的就不要去掉去掉后就会混淆不过建议最好不要这样写。◆尽量少使用层级关系
一般写法#divBox p .red{color:red;}
更好写法.red{..}◆使用class代替层级关系
一般写法#divBox ul li a{display:block;}
更好写法.block{display:block;}个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
