CSS-后代选择器

CSS后代选择器CSS属性选择器详解CSS子元素选择器后代选择器（descendantselector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对h1元素中的em元素应用样式，可以这样写：h1em{color:red;}上面这个规则会把作为h1元素后代的em元素的文本变为红色。其他em文本（如段落或块引用中的em）则不会被这个规则选中：h1Thisisaemimportant/emheading/h1pThisisaemimportant/emparagraph./p亲自试一试当然，您也可以在h1中找到的每个em元素上放一个class属性，但是显然，后代选择器的效率更高。语法解释在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器。因此，h1em选择器可以解释为“作为h1元素后代的任何em元素”。如果要从左向右读选择器，可以换成以下说法：“包含em的所有h1会把以下样式应用到该em”。具体应用后代选择器的功能极其强大。有了它，可以使HTML中不可能实现的任务成为可能。假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下，可以为包含边栏的div指定值为sidebar的class属性，并把主区的class属性值设置为maincontent。然后编写以下样式：div.sidebar{background:blue;}div.maincontent{background:white;}div.sidebara:link{color:white;}div.maincontenta:link{color:blue;}有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作ulem，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。因此，ulem将会选择以下标记中的所有em元素：ulliListitem1olliListitem1-1/liliListitem1-2/liliListitem1-3olliListitem1-3-1/liliListitemem1-3-2/em/liliListitem1-3-3/li/ol/liliListitem1-4/li/ol/liliListitem2/liliListitem3/li/ul亲自试一试