未设置效果
image.png
已设置效果
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
<style>
div {border: 1px solid blue; display: flex; font-size: 30px;}
span {border: 5px solid orange; flex-grow: 1;}
div ~ div {border-top: none;}
span ~ span {border-left: none;}
</style>
</head>
<body>
<div>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
</div>
<div>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div>
<span>31</span>
<span>32</span>
<span>33</span>
<span>34</span>
</div>
</body>
</html>
首先设置所有元素描边，然后通过通用兄弟选择器（ ~ ），匹配除第一个外所有的同级元素，取消 border-left 的值。
网友评论