html – CSS：有班级的孩子的第一个孩子

概述我有以下 HTML： <div class="statistics"> <span class="glyphicon glyphicon-calendar"></span>19/06/2015 <span class="glyphicon glyphicon-eye-open"></span> 18 lectures <span class="glyphicon glyph 我有以下 HTML：

<div >    <span ></span>19/06/2015    <span ></span> 18 lectures    <span ></span> 1 commentaire    <span ></span> SébastIEn Sougnez    <span ></span>    <span ></span>    <span ></span>    <span ></span>    <span ></span></div>

我正在应用一些CSS样式,其中,我有这个：

.article .statistics span.note {    margin-left:0px;    margin-right:5px;}.article .statistics span.note:first-child {    margin-left:25px;}

第一个CSS块被正确应用,所有“note”跨度之间的空间大约是5px但是我想在第一个跨度上放置一个margin,左边是25px的“note”类,但是,第一个孩子做似乎没有选择奇怪的元素,因为我也有这个CSS：

.article .statistics span {    margin-left:25px;    margin-right:5px;}.article .statistics span:first-child {    margin-left:0px;}

在这里,它工作正常,所有跨度除了第一个之外由25px(左侧)分隔.我想这与课程有关,但我查看了互联网,这似乎是正确的语法.

谢谢

解决方法 第一个span.note不是.statistics的第一个子节点,因此span.note：first-child将不匹配.第一个子节点是没有.note类的跨度,因此只有span：在没有类的第一个子选择器将匹配该子元素.

使用here描述的技术,将左边距应用于所有span.note子节点,然后将其从后续节点中删除,而不是尝试将其单独应用于第一个：

.article .statistics span.note {    margin-left:25px;    margin-right:5px;}.article .statistics span.note ~ span.note {    margin-left:0px;}

总结

以上是内存溢出为你收集整理的html – CSS：有班级的孩子的第一个孩子全部内容，希望文章能够帮你解决html – CSS：有班级的孩子的第一个孩子所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。