Question

我正在尝试使用块元素中的某个类设置第一个和最后一个元素的样式。我希望样式的元素不是块的直接后代：

<div id="list">
  <div>
    <p class="line">This is the first line. I want to style this.</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
  </div>

  <div>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">This is the last line. I want to style this too.</p>
  </div>
</div>

<div>
  <p class="line">Do not want to style this line</p>
  <p class="line">Do not want to style this line</p>
  <p class="line">Do not want to style this line</p>
</div>

所以在这种情况下，我正在尝试在#list中选择带有“line”类的第一行和最后一行。

这一切都可能吗？

修改

虽然以下所有答案都有效，但我发现我过度简化了问题。我想要的东西显然不能用CSS完成，至少需要一些javascript。简而言之：我有一个可变行数的表。其中一些行属于某一类。这些行在表中的位置是可变的，并且实际上可以通过用户交互进行更改。但我需要在此类的第一行和最后一行内设置一个列。我可以添加一个代码示例，但由于给出的答案实际上解决了我原来的问题，我认为最好将这个问题保留原样（并且可能为“真正的”问题启动一个新问题）。

Answer 1

如果结构足够严格，您可以使用:fist-child和:last-child。

＆＃13;

#list>div:first-child>.line:first-child,
#list>div:last-child>.line:last-child {
  color: green;
}

＆＃13;

<div id="list">
  <div>
    <p class="line">This is the first line. I want to style this.</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
  </div>

  <div>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">This is the last line. I want to style this too.</p>
  </div>
</div>

<div>
  <p class="line">Do not want to style this line</p>
  <p class="line">Do not want to style this line</p>
  <p class="line">Do not want to style this line</p>
</div>

＆＃13;

Answer 2

有警告说，您只能使用:first-of-type或:last-of-type来定位元素。

您无法定位该课程 - 没有:first-of-class或:last-of-class。

工作示例：

＆＃13;

#list > div:first-of-type > p:first-of-type,
#list > div:last-of-type > p:last-of-type {
color: rgb(255, 0, 0);
}

＆＃13;

<div id="list">
  <div>
    <p class="line">This is the first line. I want to style this.</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
  </div>

  <div>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">Do not want to style this line</p>
    <p class="line">This is the last line. I want to style this too.</p>
  </div>
</div>

<div>
  <p class="line">Do not want to style this line</p>
  <p class="line">Do not want to style this line</p>
  <p class="line">Do not want to style this line</p>
</div>

＆＃13;

Answer 3

我的建议是将单独的类添加到列表中的第一个div和列表中的最后一个div。这将使选择这些元素变得更加简单。

如果无法做到这一点，那就可以了：

#list div:first-child p:first-child {
  color:red;
}
#list div:last-child p:last-child {
  color:red;
}

第一个和最后一个元素的CSS选择器，在块中具有某个类

3 个答案: