我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式,具体代码示例如下:HTML代码:第一个子元素
使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式
2023-11-20

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中,伪类选择器是一种强大的工具,可以通过特定的选择方式来选取HTML文档中的某些元素。其中,:nth-child()是一种常用的伪类选择器,可以
如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式
2023-11-20

编程热搜

目录