包含选择符(E F)

  • 版本:CSS2

包含选择符(E F)的具体语法

E F{ sRules }

包含选择符(E F)的使用说明

选择所有被E元素包含的F元素。
  • 子选择符不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子...

    E F VS. E>F:

    <style> /* 包含选择符(E F) */ ul li{color:#f00;} /* 子选择符(E>F) */ ul>li{color:#f00;} </style> <ul class="demo"> <li>1</li> <li>2 <ul> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ul> </li> <li>3</li> </ul>

    此例,如果使用 .demo li{color:#f00;} ,那么 1, 2, 2.1, 2.2, 2.3, 3 都将会变成红色;如果使用 .demo>li{color:#f00;},那么只有 1, 2, 3 会变成红色,即只有子元素会被命中;

包含选择符(E F)的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Safari Chrome Opera
6.0 4.0 4.0 4.0 15.0

包含选择符(E F)的完整演示案例

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册