当前位置:Gxlcms > html代码 > 《CSS权威指南》基础复习+查漏补缺_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:19人阅读

前几天被朋友问到几个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是为内联样式声明保留的,它比其他声明的特殊性都高。
如: