Question

我有一个预订网站，用户可以在周视图中选择办理登机手续和退房日期。每个日期都有一个装饰“左边框”，以便更容易看到日期。

HTML：

<div id="content">

<h1>Check-in date:</h1>
<div class="dates-wrapper">
    <div class="prev">&larr;</div>
    <div class="date">15 May 2015</div>
    <div class="date">16 May 2015</div>
    <div class="date">17 May 2015</div>
    <div class="next">&rarr;</div>
</div>

<div style="clear: both"></div>

<h1>Check-out date:</h1>
<div class="dates-wrapper">
    <div class="prev">&larr;</div>
    <div class="date">15 May 2015</div>
    <div class="date">16 May 2015</div>
    <div class="date">17 May 2015</div>
    <div class="next">&rarr;</div>
</div>

</div>

CSS

.prev, .next, .date  {
  float: left;
  width: 120px;
  text-align: center;  
}
.date {
  border-left: 1px solid red;
}

.dates-wrapper {
  position: relative;
}

.content: first-child{
  border-left: none;
}

在jsfiddle中查看此示例：https://jsfiddle.net/zvo72tec/

我花了很多时间试图在第一天（2016年5月15日）删除左边界的两个视图（登记入住和退房）。我的解决方案：第一个孩子不工作，因为div“date”不是父“content”div的直接子。感谢任何帮助！

是否可以在css中完成？

Answer 1

您只需使用:nth-child选择器。

.date:nth-child(2) {
    border: none;
}

顺便说一下。包含所需日期的div不是您所拥有的任何元素的fist-child。这是第二个孩子。

.dates-wrapper元素的第一个孩子就是那些箭头。

或者您可以使用:nth-of-type

选择另一个div中的第一个div

1 个答案: