CSS学习笔记-CSS的优先级+继承性（四）

最新推荐文章于 2024-08-16 19:42:58 发布

望道同学

最新推荐文章于 2024-08-16 19:42:58 发布

阅读量1.1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_26927285/article/details/52713989

版权

html+css 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

css继承特性

CSS继承性
HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。
HTML中，<body>是其他元素的容器，是其他元素的最外层元素，所以<body>元素中定义的样式将影响其他所有元素的显示格式。
具有继承的CSS属性
文本相关的属性是继承的
text-align、
color、
text-indent、
font-family、
font-size
font-style、
font-weight、
letter-spacing、
word-spacing
text-transform、
line-height等

css优先级

单个选择器优先级

!important > 行内样式 > ID选择器 > Class选择器 >元素选择器
定义!important的选择器，优先级最高，但IE6不支持。
例如：h1{color:#ff0000 !important;}

<style type="text/css">
             /*（1）行内样式优先级最高 */
#title{ color:#0000ff;}  /*（2）ID选择器比Class选择器优先级高 */
.title{ color:#00ff00; }  /*（3）Class选择器比元素选择器优先级高 */
h1{ color:#ff0000; }     /*（4）元素选择器，优先级最低 */
</style>
<h1 class="title" id="title" style="color:#999900">人社部官员</h1>

组合选择器的优先级是如何计算的？

一般而言，选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示class选择器的优先级，用100标示ID选择器的优先级，用1000表示行内样式。
举例：
div.box span{ } 优先级为12
.box span{ } 优先级为11，优先级小于上边

编写简洁、高效的原则

概述
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找。
编写高效CSS的原则
不要在ID选择器前使用标签名。
例如：div#box 简写形式 #box
不要再class选择器前使用标签名
例如：div.box 简写形式 .box
尽量少使用层级关系
例如：.box .news .title h1 简写形式 .title h1
使用class代替层级关系
例如：.box .news .title 简写形式 .title