首页 百科知识 高级选择符

高级选择符

时间:2022-10-19 百科知识 版权反馈
【摘要】:CSS2定义了一些扩展的选择符,这些选择符目前并未被广大的浏览器所支持。我们这里称其为高级选择符。目前Firefox,Safari等现代浏览器对于高级选择符的支持较好,而IE6等传统浏览器则完全忽略这些选择符。子选择符由多个特定的选择符组成,它们由大于号“>”隔开。假设上述CSS代码对应的HTML部分代码为:相邻选择符与子选择符和后代选择符类似,同样由多个特定的选择符组成,只不过将子选择符的大于号“>”换成了加号“+”。

3.2.2 高级选择符

CSS2定义了一些扩展的选择符,这些选择符目前并未被广大的浏览器所支持。我们这里称其为高级选择符。目前Firefox,Safari等现代浏览器对于高级选择符的支持较好,而IE6等传统浏览器则完全忽略这些选择符。但是随着时间的推移,越来越多的浏览器会支持这些高级选择符。

3.2.2.1 子选择符

子选择符有些类似于后代选择符,只不过子选择符只能作用于直接后代。子选择符由多个特定的选择符组成,它们由大于号“>”隔开。比如:

img95

在该CSS对应的HTML文件中,只有id选择符content标记的元素的直接子元素li才能应用上述CSS的定义。假设上述CSS代码对应的HTML部分代码为:

img96

则在这段代码中,只有ul的直接后代li才会显示出该CSS代码所定义的样式。

3.2.2.2 相邻选择符

相邻选择符与子选择符和后代选择符类似,同样由多个特定的选择符组成,只不过将子选择符的大于号“>”换成了加号“+”。由加号隔开特定的选择符。相邻选择符只能应用于HTML代码中相邻的下一个兄弟节点。比如CSS代码:

img97

对于相应的HTML部分代码是:

img98

上述CSS的定义只对第一个段落p有效,而对第二个段落无效。因为第一个段落才是h1相邻的兄弟节点。

3.2.2.3 属性选择符

属性选择符可以根据某个属性是否存在或者属性的值来显示不同的样式。

属性选择符可以有以下4种表达方式:

img99

比如,下列代码对链接元素,有title属性的显示不一样的效果:

img100

如果对应的HTML代码中的链接元素a没有title属性,那么该CSS定义对它是不起作用的。

再如,下列CSS定义对于链接的属性rel包含friend值才生效:

img101

对应的HTML代码的链接元素a必须这样才能使得该CSS定义生效:

img102

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈