返回顶部
首页 > 资讯 > 前端开发 > node.js >CSS样式子代选择符大于号 >)使用方法
  • 818
分享到

CSS样式子代选择符大于号 >)使用方法

2024-04-02 19:04:59 818人浏览 薄情痞子
摘要

这篇文章给大家介绍CSS样式子代选择符大于号 >)使用方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。div span是上下文选择符,表示选择div里面的所有span,注意是所

这篇文章给大家介绍CSS样式子代选择符大于号 >)使用方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

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}
span{display:block;background-color:Silver;padding:10px;margin:10px;}
div>span{border:1px solid red;}
</style>
</head>
<body>
<div><a href="<a href="https://www.yisu.com/">https://www.yisu.com/</a>" target="_blank">web前端</a> <a href="<a href="https://www.yisu.com">https://www.yisu.com</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>

关于CSS样式子代选择符大于号 >)使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: CSS样式子代选择符大于号 >)使用方法

本文链接: https://lsjlt.com/news/82755.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作