CSS子选择符

来源：互联网发布：网络舆情监测专业编辑：程序博客网时间：2024/06/05 09:45

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>

如下图所示：

在浏览器中查看CSS子选择符的显示效果

提示

并不是所有的浏览器都支持子选择符！IE7以下版本的IE浏览器不支持！

由于IE 6.0及更早的版本不支持子选择器，因此这种选择器经常用于对IE 6.0隐藏某些CSS规则使用。

0 0