css 选择器获取同名class 第一个或者最后一个元素（区分class）

在CSS中，如果你想选择同名class的第一个或最后一个元素，你可以使用:first-of-type和:last-of-type伪类选择器。但是，这些选择器是基于它们的父元素中的类型（即标签名称），所以如果你有多个相同的标签名称并且它们共享一个父元素，它们才会被选中。

如果你想基于class名来选择，你可能需要使用JavaScript，因为纯CSS不支持基于class的元素数量进行选择。

以下是使用JavaScript来选择同名class的第一个或最后一个元素的例子：

// 获取所有具有指定class的元素
var elements = document.getElementsByClassName('your-class-name');
 
// 获取第一个元素
var firstElement = elements[0];
 
// 获取最后一个元素
var lastElement = elements[elements.length - 1];

如果你想使用纯CSS，你可以给第一个元素添加一个额外的class或id来特别标识它，或者调整HTML结构，使得:first-of-type和:last-of-type可以正常工作。

例如，你可以这样修改HTML结构：

<div>
  <span class="your-class-name first-element">Content 1</span>
  <span class="your-class-name">Content 2</span>
  <span class="your-class-name">Content 3</span>
  <span class="your-class-name last-element">Content 4</span>
</div>

然后在CSS中这样选择：

.first-element:first-of-type {
  /* 样式应用于第一个元素 */
}
 
.last-element:last-of-type {
  /* 样式应用于最后一个元素 */
}

请注意，这种方法需要你能够修改HTML结构，并且不是完全通过CSS实现的。