使用css last-child更改边框

Question

是否可以使用CSS last-child来执行此操作？

我可以使用同一个类添加last-child并将第二个边框设为更小的px吗？或者唯一的方法是添加不同的类名？

＆＃13;

＆＃13;

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}

＆＃13;

<div class="border"></div>
<div class="border"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你需要包装border div，然后使用:last-child你可以实现这一点。

  

使用wrapper后面:last-child的原因只会尝试   匹配父元素的最后一个子元素

＆＃13;

＆＃13;

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}

.border:last-child {
  width: 40px;
}

＆＃13;

<div class="wrapper">
  <div class="border"></div>
  <div class="border"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

是的，您可以使用last-child。 last-child选择器需要父div。请检查代码。

＆＃13;

＆＃13;

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}
div.border:last-child {
  width: 40px;
}

＆＃13;

<div>
<div class="border"></div>
<div class="border"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果使用一个元素并且没有复杂的选择器，那么更简单的方法是什么：

＆＃13;

＆＃13;

.border {
  height:5px;
  width: 160px;
  /*the gradient will create the separation of the background*/
  background:linear-gradient(#fff,#fff) 100px 0 /5px 100%  no-repeat;
  background-color:#000;
}

＆＃13;

<div class="border"></div>

＆＃13;

＆＃13;

＆＃13;

以下是如何使它像你的形象一样：

＆＃13;

＆＃13;

.border {
  height:80px;
  width: 200px;
  background:
    linear-gradient(red,red) 20px 50% /100px 5px  no-repeat,
    linear-gradient(green,green) calc(100% - 20px) 50% /50px 5px  no-repeat;
  background-color:orange;
}

＆＃13;

<div class="border"></div>

＆＃13;

＆＃13;

＆＃13;