当前位置:首页>在线课程>网页设计>Div+CSS>CSS3 技术与浏览器兼容性解析(已完结)>使用后代选择器与子选择器

[第5课] 使用后代选择器与子选择器

讲师:李老师  长度:6分49秒  软件:Div+CSS  发布日期:2018年03日09日
视频课程:[CSS3 技术与浏览器兼容性解析(已完结)]
视频播放界面 播放按钮
分享到:
课程介绍
  

1.后代选择器

后代选择器也称为包含选择器,作用就是可以选择某个元素的后代元素。例如“X Y”,X为祖先元素,Y为后代元素,表达的意思就是选择X元素中所包含的所有Y元素。这里的Y元素不管是X元素的子元素、孙辈元素或者更深层次的关系,都将被选中。换句话说,不论Y在X中有多少层级关系,Y元素都将被选中。

例如,如下的CSS样式代码。

h1 span {
font-weight: bold;
}

如本例所示,对<h1>标签中所包含的<span>标签进行样式设置,最后应用到HTML是如下格式。

<h1>这是一段文本<span>这是span内的文本</span></h1>

<h1>单独的h1</h1>

<span>单独的span</span>

<h2>被h2标签套用的文本<span>这是h2下的span</span></h2>

<h1>标签之中的所有<span>标签将被应用font-weight:bold的样式设置,注意,仅仅对有此结构的标签有效,对于单独存在的<h1>标签或是单独存在的<span>标签以及其他非<h1>标签包含的<span>标签均不会应用此样式。

 这样做能帮助避免过多的id及class的设置,直接对所需要设置的元素进行设置。


2.子选择器

子选择器只能选择某元素的子元素,例如“X > Y”,其中X为父元素,而Y为子元素,其中X > Y表示选择了X元素中包含的所有子元素Y。

子选择器与后代选择器不同,在后代选择器中Y是X的后代元素,无论有多少层级关系,而在子选择器中Y仅仅是X的子元素而已。

注意事项
-如果您在任何场合索要、传播、出售、租借学设计网出品原创视频教程,我们一律进行封号、封ip等措施处理,请务必珍惜您的帐号。无论传播还是索取,我们都会进行封号处理。
-由于您对视频教程的言论、索要、传播、出售、租借,对学设计网造成的间接或直接经济损失,我们将追究您的法律责任,并有权索回对我们造成的经济损失。
-只要您浏览本网页我们就将视您已经阅读了本注意事项中所有条例,并且同意本事项的所有条例。
-学设计网拥有以上事项的最终解释权。
教程评论

您必须 [ 登录 ] 才能发表评论!

如何观看全部课程
VIP会员399元1年可享受的权限:
观看下载所有视频教程
下载未来一年更新教程
可加入VIP群进行技术讨论
可下载所有资源(源文件和素材)
第二年续费仅为279元

推荐课程

[网页设计] CSS3 技术与浏览器兼容性解析(已完结)

讲师:李老师

80

课时
推荐图文教程
推荐书籍
首 页在线课程书籍光盘图文教程
点击这里给我发消息47707077
点击这里给我发消息11402485
联系电话

13520020606

联系邮箱
47707077@qq.com
Copyright 2017 学设计网, All Rights Reserved 京ICP备14050932号