比如ul下不确定li的多少 又是下面连体按钮样式
li:only-child
li:first-child
li:not(:first-child)
li:last-child
li:first-child
li:not(:first-child)
li:last-child
整体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
background: #fff;
display: flex;
padding-right: 20px;
list-style: none;
}
li{
padding: 7px 35px;
border: 1px solid #ccc;
font-size: 12px;
cursor: pointer;
}
li:first-child {
border-radius: 5px 0 0 5px;
background: #3bafda;
color: #fff;
}
li:last-child {
border-radius: 0 5px 5px 0;
}
li:not(:first-child) {
border-left: 0;
}
li:only-child {
border-radius: 5px;
}
</style>
</head>
<body>
<ul>
<li>COSCO</li>
<li>APL</li>
<li>SCAC</li>
<li>APNL</li>
<li>EFEF</li>
</ul>
</body>
</html>
