CSS子选择符也可以称为子对象选择符、子选择器等,主要用于定义某个元素中子元素对象的样式,无法定义子元素以外的对象。
子选择器可以让我们指定要的是哪个父标签的哪个子标签。也就是说,子选择器只对元素的子元素生效,而不会影响到其它元素的后代元素。
所谓子元素,类似于下面的格式:
<p><strong>
子元素</strong>的格式</p>
strong元素就是p元素的子元素。
CSS子选择符的定义
子选择符的选择符与选择符之间必须使用大于号(>)符号。例如:
<style type="text/css">
<!--
body > strong
{
color:#FF0000;
font-size:18px;
text-decoration:underline;
}
-->
</style>
上述CSS代码定义了body元素中的子元素strong元素的样式。
再看一个结合后代选择器和子选择器的例子:
table.company td > p
上面的选择器会选择作为td元素中所有的子元素(p元素),这个td元素本身从table元素继承,而该table元素又有一个包含company的class属性。
子选择符的使用示例
在浏览器中查看CSS子选择符的显示效果。
源代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS子选择符示例-www.baike369.com</title> <style type="text/css"> <!-- p > strong{ color:#FF0000; font-size:18px; text-decoration:underline; } --> </style> </head> <body> <p>定义了p元素中的子元素<strong>strong元素</strong>的样式!</p> <p>在p元素中<em><strong>strong元素</strong>不是p元素的子元素,所以不起作用!</em></p> <p>在<strong>p元素</strong>中,两个<strong>strong元素</strong>的使用方法!</p> <p>在<strong>p元素中,<strong>strong元素</strong>的嵌套使用方法!</strong></p> </body> </html>
如下图所示:
提示
并不是所有的浏览器都支持子选择符!IE7以下版本的IE浏览器不支持!
由于IE 6.0及更早的版本不支持子选择器,因此这种选择器经常用于对IE 6.0隐藏某些CSS规则使用。