《CSS权威指南》基础复习+查漏补缺_html/css_WEB-ITnose

前几天被朋友问到几个CSS问题，讲道理么，接触CSS是从大一开始的，也算有3年半了，总是觉得自己对css算是熟悉的了。然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司，事情不算多，于是拿起《CSS权威指南》进行"基础学习"+"查漏补缺"，本篇文章主要是总结了些自己认为CSS中值的注意的几个知识点(本文知识点仅限本书范围内，若要讲CSS全部样式，那本兽还是选择慢慢懵逼去~)。

选择器

这里要说明的是类选择器的嵌套选择与多类选择器的差别，顺便捎上了一级子元素的选择

类选择器基本写法：

.your-class{/*...*/}

类选择器的嵌套选择写法：

.first-class .second-class{/*...*/}

多类选择器基本写法：

.first-class.second-class{/*...*/}

一级子元素的选择写法：

.first-class > .second-class{/*...*/}

从代码看它们之间的区别：

HELLO
hello
HELLO
hello
Hello World
Hello World
Hello 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是为内联样式声明保留的，它比其他声明的特殊性都高。
如：

 
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。