CSS 只选中第一个和最后一个元素

今天遇到一个有点意思的样式设定，要求不管中间有多少内容，都保持第一个元素的左上角和最后一个元素的左下角有一个弧度，下面是效果图：

页面结构：

<ul class="grandparent"><li class="parent"><div class="son"></div></li><li class="parent"><div class="son"></div></li><li class="parent"><div class="son"></div></li>
</ul>

CSS：

.grandparent li:first-of-type .son{border-top-left-radius: 15px;
}
.grandparent li:last-child .son{border-bottom-left-radius: 15px;
}

由于背景和边框都是由.son 控制，所以css应用的是.son元素。其他情况以此类推就行。

CSS 只选中第一个和最后一个元素相关推荐

echarts 实现横坐标只显示第一个和最后一个自定义的内容
echarts 实现横坐标只显示第一个和最后一个自定义的内容要实现横坐标的修改则可以找到 xAxis->axisLabel xAxis:[{axisLabel:{show:true,forma ...
java链表的数据结构_Java数据结构获取链表(LinkedList)的第一个和最后一个元素
Java数据结构获取链表(LinkedList)的第一个和最后一个元素以下实例演示了如何使用 LinkedList 类的 linkedlistname.getFirst() 和 linkedlis ...
c ++ stl_获取列表的第一个和最后一个元素| C ++ STL
c ++ stl Given a list with some of the elements, we have to access its first and last elements of th ...
Java 输出链表的第一个和最后一个元素
使用 LinkedList 类的 linkedlistname.getFirst() 和 linkedlistname.getLast() 来获取链表的第一个和最后一个元素完整代码 import j ...
python dict 选择第一个、最后一个元素的key或value
比如字典: my_dict = {"first_key": 'first_value',"second_key": "second_value&quo ...
php去掉数组中第一个和最后一个元素
使用 array_shift() 删除数组的第一个元素,例如: $arr=array('apple','banana','orange'); $res=array_shift($arr); 使用 ar ...
css : 使用浮动实现左右各放一个元素时很容易犯的错误
比如说,有一个div,我想在左侧和右侧各方一个元素. 如果不想用flex,那就只能用浮动了. ... <div class="up clearfix"><h6&g ...
freemarker遍历list处理第一个、最后一个元素
_index获取下标如果需要显示当前循环到第几项,可以这样写 <#list ["hello","world"] as word><span& ...
java list 判断最后一个元素_java – ArrayList查找第一个和最后一个元素
它总是建议使用迭代器或ListIterator来遍历列表.当您修改列表数据(删除或插入元素)时,使用列表大小作为参考不会锻炼. 迭代器 – 允许调用者在一个方向上遍历列表,并在迭代期间从底层集合中删除 ...
java取出list的最后一个值?从Java中的ArrayList获取第一个和最后一个元素？
ArrayList类的get()方法接受表示索引值的整数,并在指定索引处返回当前ArrayList对象的元素. 因此,如果将0传递给此方法,则可以获取当前ArrayList的第一个元素: 如果传递li ...

CSS 只选中第一个和最后一个元素

CSS 只选中第一个和最后一个元素相关推荐

最新文章

热门文章