CSS组合选择符

div p
{
 color: red;
}
当p被div包含时（p是div的后裔时），p中文字的颜色为红色
<div>
        <p>梦之都CSS 包含选择符</p>
</div>
<div>
        <span>
                <p>梦之都CSS 包含选择符</p>
        </span>
</div>
上面两个例子都可以,只要是p被div包含就可以
div p span code
{
 color: green;
}
div span code
{
 color: green;
}

p *
{
 color: blue;
}

h1
{
 color: red;
}
em
{
 color: red;
}
h1 em
{
 color: blue;
}
<h1>梦之都的 <em>蓝色文字</em> 红色文字</h1>

div p
{
 color: red;
 font-size: 120%;
}
div p span cite
{
 color: green;
 font-size: 120%;
}
p *
{
 color: blue;
 font-size: 180%;
}

ol li
{ 
 list-style-type:decimal;
} 
ol ol li
{ 
 list-style-type:lower-latin;
} 
ol ol ol li
{ 
 list-style-type: lower-roman;
}
<ol>
  <li>梦之都
          <ol>
                  <li>教程
                          <ol>
                                  <li>html</li>
                                  <li>css</li>
                                  <li>javascript</li>
                          </ol>
                  </li>
                  <li>索引</li>
                  <li>示例</li>
          </ol>
  </li>
  <li>dreamdu
          <ol>
                  <li>tutorial</li>
                  <li>index</li>
                  <li>examples</li>
          </ol>
  </li>
</ol>

       二 CSS子对象选择符
       E > F -- CSS子对象选择符，匹配文档中符合选择符规定的直接包含关系的元素
      语法: E > F...
      E > F...，E、F代表简单选择符
      说明：匹配文档中符合选择符规定的直接包含关系的元素，例如E > F选择符，匹配当F元素是E元素的子元素的E元素，包含选择符是由两个或多个使用>（大于号，greater-than sign）连接的简单选择符组成"孩子、儿女"child代表文档中一个元素是另外一个元素的孩子，也就是一个元素直接包含另外一个元素，包含选择符比子选择符范围更广，因包含关系中一个元素可以是另外一个元素的"儿子"、"孙子"、"从孙子"，而子对象选择符中的一个元素只能是另外一个元素的"儿子"，"孙子"或"从孙子"不行，子对象选择符的英文名称为"child combinator"，child，中文"孩子、儿女"的意思，combinator，中文"组合"的意思。
       示例

p > code

{

 color:blue;

 font-size:120%;

}

<p>

        <code>梦之都CSS子对象选择符可用，蓝色</code>

</p>

     上面的例子可以显示p > code定义的样式.

<p>

        <span><code>梦之都CSS子对象选择符不可用</code></span>

</p>

      上面的例子不能显示p > code定义的样式,因为p与code不是直接包含关系，是间接包含关系（code是p的"孙子"）和包含选择符一样,直接子对象选择符也可以扩展。

p > span > code

{

 color:green;

 font-size:80%;

}

p > span > code选择符可以正常显示上面的示例2

p > code

{

 color:red;

 font-size:120%;

}

p > span > code

{

 color:green;

 font-size:120%;

}

div ol > li p

{

 color:blue;

 font-size:120%;

}

h1 + p
{
 color:red;
}

<h1>CSS 直接相邻选择符</h1>
<p>
        使用了样式
</p>
由于p和h1是直接的邻居,所以p段落中的内容可以显示红色样式
<h1>CSS 直接相邻选择符</h1>
<span>错误</span>
<p>
        无法使用样式
</p>
下面的一个例子，缩小了紧跟在h1之后的h2元素的垂直距离：
h1 + h2
{
 margin-top: -1em;
 color: green;
}
下面的规则同上一个类似，不过它加入了类选择符。因此只有当h1具有class=dreamdu类时才适用：
h1.dreamdu + h2
{
 margin-top: -2em;
 color: red;
}

相关CSS组合选择符

• CSS 轮廓 [2014-4-10]
• CSS 表格 [2014-4-10]
• CSS 列表 [2014-4-10]
• CSS 链接 [2014-4-10]
• CSS 字体 [2014-4-10]
• CSS 文本 [2014-4-10]