《CSS权威指南》基础复习+查漏补缺_html/css_WEB-ITnose
选择器
这里要说明的是类选择器的嵌套选择与多类选择器的差别,顺便捎上了一级子元素的选择
类选择器基本写法:
.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是为内联样式声明保留的,它比其他声明的特殊性都高。
如:
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
下一篇: 微信支付问题