Html 新行上第一个和最后一个内联块元素的选择器

我正在尝试构建一个带有动态元素的导航，它可以在小屏幕上分成两行，并且我希望能够在每行上设置第一行和最后一行元素的样式

以下是一些小屏幕尺寸的SCS示例（圆角应位于每行的第一个和最后一个元素上）：

首页
第二页
第三页
第四页
另一个示例页面
这可能是最后一页了
但事实并非如此
这实际上是最后一页

保险商实验室{
列表样式：无；
字体大小：0px；
李{
字号：18px；
显示：内联块；
填充：10px 30px；
边框：1px纯黑；
利润率：10px-1px 10px 0；
&：第一个孩子{
边框左上半径：5px；
边框左下半径：5px；
}
&：最后一个孩子{
边框右上角半径：5px；
边框右下半径：5px；
}
}        
}

使用relevantjsfiddle：

是否可以为运行在新行上的第一个和最后一个内联块元素获取选择器，或者是否有任何其他（非javascript）方法实现此效果

是否可以为运行在新行上的第一个和最后一个内联块元素获取选择器，或者是否有任何其他（非javascript）方法实现此效果

不，没有这样的选择器。CSS无法访问有关行在何处中断的信息（只有

：first-line

伪元素例外）。不，没有其他非JavaScript方法可以实现这种效果

如果您愿意使用JS，可以在布局可能发生更改时迭代元素，检查每个vis-a-vis容器相对于其父容器的位置，判断它是靠左侧还是靠右侧，然后应用边界半径

另一个可能的JS解决方案是通过累积宽度并计算出必须在何处发生断线来执行您自己的断线计算

---

您可能希望检查诸如Massy之类的库，看看它们是否提供了允许您访问内部布局配置的挂钩，这可能会使访问更容易。

没有CSS唯一的方法。我补充说

作为一种解决方法，您可以为列表项指定固定的百分比宽度，并使用CSS媒体查询根据屏幕大小增加/减少宽度。通过这种方式，您将确切地知道一行中适合多少项，从而允许您设置特定元素的样式。SASS可以使编写重复的CSS变得更容易。大致轮廓（打开整个页面并调整浏览器大小）：

ul{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
浮动：左；
框大小：边框框；
边缘底部：.5em；
边框：薄实线#EEE；
填充：1em；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
背景色：#CEF；
}
李：第一个孩子{
边框左上半径：1米；
边框左下半径：1米；
}
李：最后一个孩子{
边框右上角半径：1米；
边框右下半径：1米；
}
@介质（最小宽度：600px）和（最大宽度：799px）{
/*每行4项*/
李{
宽度：25%；
}
/*比赛4，8，12*/
李：第n个孩子（4n+4）{
边框右上角半径：1米；
边框右下半径：1米；
}
/*比赛5，9，13*/
李：第n个孩子（4n+5）{
边框左上半径：1米；
边框左下半径：1米；
}
}
@介质（最大宽度：599px）{
/*每行3项*/
李{
宽度：33.3333%；
}
/*比赛3，6，9*/
李：第n个孩子（3n+3）{
边框右上角半径：1米；
边框右下半径：1米；
}
/*比赛4，7，10*/
李：第n个孩子（3n+4）{
边框左上半径：1米；
边框左下半径：1米；
}
}

自由祈祷者
埃尼安在velit vel
奥迪奥大学
整株灵芝
福斯普莱斯奥古斯酒店
终末前庭
无主
苏利西图丁大学
梅塞纳斯·奎斯·尼斯
埃利芬德贾斯托万岁
自由法雷特拉酒店

为什么不能使用您提供的示例？您是否可以包含HTML以便人们可以看到您的语法？谢谢：）@adityaponkhe因为

：第一个孩子
和
：最后一个孩子
指的是DOM中的位置，而不是线上的位置。@torazaburo我的错，我不明白这个问题。今天（2017年）有没有办法做到这一点？
<ul>
    <li>First page</li>
    <li>Second page</li>
    <li>Third page</li>
    <li>Fourth page</li>
    <li>Another example page</li>
    <li>This could be the last page</li>
    <li>But its not</li>
    <li>This is actually the last page</li> 
</ul>

ul {
    list-style:none;
    font-size:0px;
    li {
        font-size:18px;
        display:inline-block;
        padding:10px 30px;
        border:1px solid black;
        margin:10px -1px 10px 0;
        &:first-child {
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
        }
        &:last-child {
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
        }
    }        
}