前几天被朋友问到几个css问题，讲道理么，接触css是从大一开始的，也算有3年半了，总是觉得自己对css算是熟悉的了。然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司，事情不算多，于是拿起《css权威指南》进行"基础学习"+"查漏补缺"，本篇文章主要是总结了些自己认为css中值的注意的几个知识点(本文知识点仅限本书范围内，若要讲css全部样式，那本兽还是选择慢慢懵逼去~)。
选择器
这里要说明的是类选择器的嵌套选择与多类选择器的差别，顺便捎上了一级子元素的选择
类选择器基本写法：
.your-class{/*...*/} 类选择器的嵌套选择写法：
立即学习“前端免费学习笔记（深入）”；
.first-class .second-class{/*...*/} 多类选择器基本写法：
.first-class.second-class{/*...*/} 一级子元素的选择写法：
.first-class > .second-class{/*...*/} 从代码看它们之间的区别：
HELLOhelloHELLOhelloHello WorldHello WorldHello World
得出结论：
· 类选择器的嵌套选择，选择的是first-style类下的所有包含second-style类的子元素(不论几级子元素)
· 一级子元素的选择，选择的是first-style下的一级子元素中包含second-style类的元素，再往里层嵌套的元素不算
· 多类选择器的选择，选择同时包含first-style和second-style类的元素
样式优先级
样式的优先级由选择器本身的组件确定，我们将优先值表述为4个部分，如：0.0.0.0
注意：前一部分的优先级大于后一部分的优先级，请无视他们的值之间的大小。如：0.0.1.0 大于 0.0.0.12，规则以此类推。
选择器的具体优先级如下：
· 对于选择器中给定的各个ID属性值，加 0.1.0.0;
· 对于选择器中给定的各个类属性值、属性选择或伪类，加 0.0.1.0;
· 对于选择器中给定的各个元素和伪元素，加 0.0.0.1;
· 结合符和通配符选择对优先级没有任何贡献。
用代码说明优先级：
div{ color: black} /* 0.0.0.1 */div p{ color:black} /* 0.0.0.2 */.my-div{ color:black} /* 0.0.1.0 */div.my-div{ color: black} /* 0.0.1.1 */.my-div .my-p{ color: black} /* 0.0.2.0 */.my-div p.my-p{ color: black} /* 0.0.2.1 */div.my-div p.my-p{ color: black} /* 0.0.2.2 *//*... 以此类推*/#div-id{ color: black} /*0.1.0.0 *//*... 继续类推*/ 那么有人会注意到，在0.0.0.0的4个部分中，第一个始终没使用到。它是怎么用的呢？
一般来说，第一个0是为内联样式声明保留的，它比其他声明的特殊性都高。
如：
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
