如何通过纯CSS实现QListView首项与末项的圆角效果？

嘿，我完全懂你的困扰——想让QMenu和QComboBox的下拉列表里，只有第一项和最后一项带圆角，结果现在所有项都有圆角，试了CSS的:first/:last伪类还没效果。其实核心问题是Qt样式表（QSS）和标准CSS的伪类支持并不完全一致，它不支持标准CSS里的:first-child/:last-child，但它有自己专属的伪状态可以实现这个需求！

下面分QMenu和QComboBox两个场景给你调整后的样式代码：

一、QMenu的首末项圆角实现 #

QMenu本身支持::item:first和::item:last这两个伪状态，只要把全局项的圆角去掉，单独给首末项加对应方向的圆角就行，注意一定要把QMenu的padding设为0，否则首末项的圆角会被内边距遮挡：

/* ======= QMenu ======= */
QMenu {
    background-color: #FFFFFF;
    border: 2px solid #CCCCCC;
    border-radius: 7px;
    padding: 0px; /* 关键：不能留内边距 */
}

/* 全局菜单项去掉圆角 */
QMenu::item {
    padding: 5px;
    border-radius: 0px;
}

/* 第一项只加顶部圆角 */
QMenu::item:first {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* 最后一项只加底部圆角 */
QMenu::item:last {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

QMenu::item:selected {
    background-color: #D3E3ED;
    color: #3B3B3B;
}

二、QComboBox下拉列表的首末项圆角实现 #

QComboBox弹出的QListView同样可以用::item:first和::item:last，但要注意把QListView的padding也设为0，同时全局项去掉圆角，再给首末项单独设置对应方向的圆角：

/* ======= QComboBox ======= */
QComboBox {
    combobox-popup: 0;
    border: 2px solid #CCCCCC;
    border-radius: 7px;
    min-width: 6em;
    padding: 7px;
}

QComboBox:on{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: #D3E3ED;
}

QComboBox::drop-down{
    border: 0px;
}

QComboBox::down-arrow {
    image: url(:/icons/arrow_down.svg);
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

QComboBox::down-arrow:on {
    image: url(:/icons/arrow_up.svg);
}

QComboBox QListView{
    top: 2px;
    border: 2px solid #CCCCCC;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background: #FFFFFF;
    padding: 0px; /* 关键：内边距设为0 */
    outline: 0;
}

QListView::item:hover{
    background: #D3E3ED;
    color: #3B3B3B
}

/* 全局列表项去掉圆角 */
QListView::item{
    background: transparent;
    color: #3B3B3B;
    padding: 5px;
    outline: 0;
    border-radius: 0px;
}

/* 第一项加顶部圆角 */
QListView::item:first {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* 最后一项加底部圆角 */
QListView::item:last {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

小提醒 #

如果你的Qt版本比较旧（比如Qt 5.9及以下），可能QListView的::item:first/::item:last支持不够稳定，这时候可以尝试把QListView的边框圆角去掉，让首项的顶部圆角和ListView的顶部对齐，末项的底部圆角和ListView的底部对齐，也能达到类似效果。另外一定要检查padding设置，这是很多时候圆角不生效的关键！

备注：内容来源于stack exchange，提问作者Mika