起航学习网

这篇文章讲述了Web前端开发中CSS 子元素选择器，本篇文章在IT培训网Web培训课程中也是有提到过的，那小T今天做了一个整理分析给大家!

CSS 子元素选择器

CSS 后代选择器

CSS 相邻兄弟选择器

与后代选择器相比，子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器(Child selector)。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

亲自试一试

语法解释

您应该已经注意到了，子选择器使用了大于号(子结合符)。

子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong

h1> strong

h1 >strong

h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

以上就是本篇内容的全部了，这一篇Web前端开发中CSS 框模型概述希望可以对各位Web前端开发者来说启到帮助。更多关于Web教程、Web培训类相关知识请关注Web培训官网，也欢迎各位新生or大牛莅临IT培训网线下课堂互动交流!

免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容

Web教程网是一个专注于技术资讯的综合性门户网站。是Web爱好者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。

文章出自：http://qh.itpxw.cn/peixun/web/202185776.html

文章标题：Web前端开发中CSS 子元素选择器

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉