14.8.1 CSS E F 包含选择符

示例

div p
{
	color: red;
}

当p被div包含时（p是div的后裔时），p中文字的颜色为红色

<div>
        <p>梦之都CSS 包含选择符</p>
</div>

<div>
        <span>
                <p>梦之都CSS 包含选择符</p>
        </span>
</div>

上面两个例子都可以,只要是p被div包含就可以

CSS E F 包含选择符示例 -- 可以尝试编辑

div p span code
{
	color: green;
}

div span code
{
	color: green;
}

包含关系不限制包含的层数，例如上面的两个示例只要code被div包含，code内的文字颜色为绿色。注意：多个选择符组成的包含选择符一定要使用空格隔开

p *
{
	color: blue;
}

上面的p与全局选择符的例子定义了p中的所有元素内的文字颜色都为蓝色

h1
{
	color: red;
}
em
{
	color: red;
}
h1 em
{
	color: blue;
}

<h1>梦之都的 <em>蓝色文字</em> 红色文字</h1>

上例为包含选择符与类型选择符的层叠

CSS E F 包含选择符示例 -- 可以尝试编辑

div p
{
	color: red;
	font-size: 120%;
}

div p span cite
{
	color: green;
	font-size: 120%;
}

p *
{
	color: blue;
	font-size: 180%;
}

上例为比较复杂的包含选择符

CSS E F 包含选择符示例 -- 可以尝试编辑

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>

上例展示了多个ol组成的包含选择符

CSS E F 包含选择符示例 -- 可以尝试编辑

浏览器兼容性

• CSS选择符浏览器兼容性索引

参考

• HTML文档树

• CSS教程

• 14.8 CSS组合选择符
• 14.8.1 CSS E F 包含选择符
• 14.8.2 CSS E > F 子对象选择符
• 14.8.3 CSS E + F 直接相邻选择符
• 14.8.4 CSS E ~ F 普通相邻选择符