css中空格运算符作用

技术分享 2019-10-01 00:00:00





第一个类b的类路径是th .b
第二个类b的类路径是th.b
第三个类b的类路径是 .b

第三个类b的类路径是 .b


  首先说,CSS语言的运算符就不多,有.#{}:";还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。

 讲解:
1、第一个类b的类路径是td .b,定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。
以下是引用片段:
td .b {
color:#00ff00;
}
定义的是
text
这组代码块中的b类,class="b"是包含在td标签内的,是td的子级,所以在这里要用“空格”指向明确表明父子级别关系。
2、第二个类b的类路径是th.b,定义的是该HTML文档内所有的带class="b"的th标签的样式。
以下是引用片段:
th.b {
color: #FF0000
}
定义的是text,在这里的代码中,th和class=b是平级的,先th后.b组成一个同级类路径th.b,所以没有空格代表“HTML类”和“自定义类”具有同级路径!
3、第三个类b的类路径是 .b,定义该HTML文档内所有的td标签的样式,它是该文档的一个全局样式,是body .b的简写。
以下是引用片段:
.b {
color:#0000ff;
font-size:12px;
}
定义了第三个类b的类路径是td.b和
第三个类b的类路径是 .b
这两处的b类没有明确的路径指向,优先级别要比有明确路径的低。
4、大家可以看到,在HTML代码中,同样都是class="b",但是在CSS定义时,采用的类路径不同,作用就不同了。类路径越完整,优先级越高。在具体应用的时候,我们可以,使用完整类路径来定义某HTML代码块某一些特殊地方,做异化处理。例如本例表头th的黑体字显示效果。
咨询小瓶科技
咨询我们
顶部