CSS派生选择器

派生选择器

派生选择器从字面意思上可能很难理解，在CSS1中它叫上下文选择器，这个名字是比派生选择器好理解的多。 派生选择器就是根据文档的上下文关系来确定某个标签的样式。

比方说，你希望列表中的 strong 元素变为斜体字，而不是粗体字，可以这样定义一个派生选择器：

 li strong {

 font-style: italic;

 font-weight: normal;

   }

请注意li 和strong的上下文关系：

 <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
         <ul>
  <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
  <li>我是正常的字体。</li>
     </ul>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

语言基础总结：

１.在需要指定元素或对象ＩＤ或类属性名的情况下，写法是元素在前，对象ＩＤ或类元素名在后，
２.在须同时指定类名和ＩＤ名的情况下，两者不分先后，但元素名在前
３.中间的空格表示后代元素

在CSS3中派生选择器用包含三种子类选择器：CSS 后代选择器、CSS 子元素选择器和CSS 相邻兄弟选择器。下面我们来了解这三种选择器的用法。

CSS 后代选择器

后代选择器（descendant selector）又称为包含选择器。顾名思义，就是给包含在a元素中的b元素设置样式，而没有在a元素中的b元素不会受到影响。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

  h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

 <h1>This is a <em>important</em> heading</h1>

 <p>This is a <em>important</em> paragraph.</p>

子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。使用子元素选择器时这两个元素必须是父子关系，定义样式时，两个元素之间用“>”连接。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

 h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

  <h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

 h1 + p {margin-top:50px;}            

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

相邻兄弟选择器必须是同一个父元素下的紧挨着的两个元素才会受到样式的影响。如果不是同一个父元素或者没有相邻都不会调用该样式。

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。