您好!欢迎来到静学网! 注册 登入
  • 致力中国及国外独立搜索引擎技术及第三方网站搜索引擎SEO排名研究

CSS 后代选择器和CSS 子元素选择器语法分析及使用方法(四)

课程目录 SEO资深顾问 次浏览
CSS选择器已经说了六种了,这一节课我们来讲讲CSS后代选择器和CSS子元素器。后代选择器又可称之为包含选择器,可作为某种元素后代的元素,后代选择器其实就是关于层级的关系,谁嵌套在谁里面,因此后代选择器的语法结构可这么写[selector1] ……[selectorn]注意选择器之间要空格,否则无效;与后代选择器不同的事,子元素选择器只能选择作为某元素子元素的元素,其基本语法结构为[selector]> [selector1],所谓子元素就是只能是元素第二层,深入一层就无效了。
 
CSS 后代选择器详解

后代选择器一定程度上提高了代码运行的效率,后代选择器语法中,中间空格不是只有一个或则之规定一个,其实它是可以有多个的,中间空格从专业的角度上讲就是一种结合符号,可以解释为“什么作为什么的后代”,比如一下代码中:
 
<p><strong>后代选择器</strong></p>
p strong{
color:red;
}
可以解释为strong作为p的后代。值得注意的是后代选择器的层级深度是可以无限延伸的,这一点比其他选择器灵活多了。
css后代选择器
 
 
CSS 子元素选择器详解

子选择器相对来说比较局限,不像后代选择器那样灵活多变,不过它可以结合后代选择器进行综合利用。子选择器不能选中子元素更深层级的标签,如果要选择,那么就要写上层级的层级,示例代码如下:
 
<p><em><strong>后代选择器</strong></em></p>
如何我要用子元素选择器改变文字样式,显然第一层级是不行的,至少要深入两个层级才能起作用,如p >em >strong {color:red;}。一般子元素选择器用在比较简单的网页制作,这样更加高效些。
 
下一节课程将会讲到CSS 相邻兄弟选择器和CSS 伪类,伪类本质上不属于选择器,但是在实际应用中却又很大的帮助,特别是在网站导航中,用的是最多的。
 
 



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明CSS 后代选择器和CSS 子元素选择器语法分析及使用方法(四)
顶一下
(1)
踩一下
(0)
友情链接:
网站优化
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com