CSS款式子代挑选符(超过号 >)应用案例

日期:2021-03-08 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

div span是左右文挑选符,表明挑选div里边的全部span,留意是全部的,不管是否立即承下关联。

可是div>span不一样。 >(超过号)是子代挑选符,它表明的是挑选div的子代span。

比如在构造


拷贝编码
编码以下:

<div id="keleyi">
<span id="erzi-keleyi-com">儿子span
<span id="sunzi-keleyi-com">孙子span</span>
</span>
</div>
<span>非div內部span</span>

div>span只能挑选id="erzi-keleyi-com"的span,由于它是div的子代。而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>
div{border:1px solid green;margin:10px}/*div为翠绿色边框*/
span{display:block;background-color:Silver;padding:10px;margin:10px;}/*span情况色调为银白色*/
div>span{border:1px solid red;}/*有超过号*/
</style>
</head>
<body>
<div><a href="<a href="https://www.jb51.net/">https://www.jb51.net/</a>" target="_blank">web前端开发</a> <a href="<a href="https://www.jb51.net">https://www.jb51.net</a>" target="_blank">沒有超过号的</a>
</div>
<div>仅有div的儿子span元素有鲜红色边框</div>
<div id="keleyi">
<span id="erzi-keleyi-com">div儿子span
<span id="sunzi-keleyi-com">div孙子span
</span>
</div>
<span>非div內部span</span></p> <p></body>
</html></p> <p>

上一篇:CCS完成input和img水平对齐的方式 返回下一篇:没有了