前端之 CSS 知识点回顾-优快云博客

本文链接：https://blog.youkuaiyun.com/swzhang_01/article/details/105641410

本文总结了CSS的关键知识点，包括设置样式的3种方式、多种选择器及其优先级、CSS Hack的概念与分类、display:none与visibility:hidden的区别、Sass等CSS预处理器的特点、CSS的content属性，以及rgba()和opacity透明效果的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

总结收集CSS的一些关键知识点

设置样式的方式有几种

3种

外部样式表，使用link引入一个外部css文件。
内部样式表，在head标签中使用style标签设置样式。
内联样式，在HTML元素中使用style属性定义样式

选择器都有哪些

派生选择器（根据文档的上下文关系来确定某个标签的样式。li strong {font-style: italic;font-weight: normal;}）
id选择器（id）
类选择器（class）
属性选择器（用DOM的属性进行声明）
后代选择器（使用空格间隔，div p{}）
群组选择器（使用逗号分隔，div,p,a{}）

选择器的优先级

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。

<style>
.classA{ color:blue;}


.classB{ color:red;}
</style>


<body>
<p class='classB classA'> 123 </p>
</body>

<p>标签内的文字的颜色是red，优先级相等的时候与文件中样式定义的先后顺序有关，即是后面的覆盖前面的，与在class定义中的先后关系无关。

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

下面列表中，选择器类型的优先级是递增的：

派生选择器（例如, h1）和伪元素（例如, ::before）
类选择器(例如,.example)，属性选择器（例如, [type="radio"]），伪类（例如, :hover）
ID选择器（例如, #example）
通配选择符(*), 关系选择符 (+, >, ~, ' ') 和否定伪类(:not()) 对优先级没有影响。（但是，在:not()内部声明的选择器是会影响优先级）。
给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。

例外的!important规则

当在一个样式声明中使用一个!important规则时，此声明将覆盖任何其他声明。
当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。

一些经验法则

一定要优化考虑使用样式规则的优先级来解决问题而不是!important
只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用!important
永远不要在全站范围的 css 上使用!important
永远不要在你的插件中使用!important

木已成舟！怎样覆盖!important

再添加一条带!important的CSS规则
给选择器更高的优先级
添加一样选择器，把它的位置放在原有声明的后面，让其覆盖
干脆改写原来的规则，以避免使用!important

什么是CSS Hack

由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），
对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本编写特定的CSS样式，
我们把这个针对不同的浏览器/不同版本写相应的CSS的过程，叫做CSS Hack。

分类

属性前缀法(即类内部Hack)：例如 IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，IE6~IE10都认识\9，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html.class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：
，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。

使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。

display:none与visibility:hidden的区别

display:none元素完全从渲染树中消失，渲染的时候不占据任何空间。
visibility: hidden不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见。
display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容。