CSS样式子代选择符(大于号 >)使用实例

点评：CSS样式子代选择符使用方法，有需要的朋友可以参考一下，希望对大家有所帮助！

p span是上下文选择符，表示选择p里面的所有span，注意是所有的，无论是不是直接承下关系。

但是p>span不同。 >(大于号)是子代选择符，它表示的是选择p的子代span。

例如在结构

复制代码代码如下:

儿子span

孙子span





非p内部span

p>span只能选择id="erzi-keleyi-com"的span，因为它是p的子代。而id="sunzi-keleyi-com"的span没有被选择。

下面为实例代码：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head>

<title>css大于号示例</title>

<style>

p{border:1px solid green;margin:10px}/*p为绿色边框*/

span{display:block;background-color:Silver;padding:10px;margin:10px;}/*span背景颜色为银色*/

p>span{border:1px solid red;}/*有大于号*/

</style>

</head>

<body>

<a href="<a href="http://www.jb51.net/">http://www.jb51.net/</a>" target="_blank">web前端</a> <a href="<a href="http://www.jb51.net">http://www.jb51.net</a>" target="_blank">没有大于号的</a>



只有p的儿子span元素有红色边框



p儿子span

p孙子span





非p内部span </body>

</html>