Question

我有这样的东西：

<html>
<head>
    <style>
        div {
            padding: 10px;
            border: solid 2px;
            border-radius: 10px;
            display: inline-block;
        }

        div + div {
            border-radius: 0px;
        }
    </style>
 </head>
 <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
 </body>
</html>

这是输出：

但是我试图得到这个：

请注意不存在任何特定的母体与特ID或class或{甚至{1}};那么我就不能使用tag type和first-child选择器。

而且，我不能（也不想使用）特殊类用于中间元素或拐角。我只是想知道知道是否有什么办法可以让它不使用类和无限数量接近彼此相同的元素。

谢谢。

Answer 1

是的，您可以这样做：

div {
    padding: 10px;
    border: solid 2px;
    border-radius: 10px 0 0 10px;
    display: inline-block;
}
div + div {
  border-radius: 0;
}
div + div:last-of-type {
    border-radius: 0 10px 10px 0;
}

或者根据情况可能更简单：

div {
    padding: 10px;
    border: solid 2px;
    display: inline-block;
}
div:first-of-type {
    border-radius: 10px 0 0 10px;
}
div:last-of-type {
    border-radius: 0 10px 10px 0;
}

Answer 2

仅使用+选择器而无需使用nth-*选择器的骇人方法，它可以与任何具有相同类型的连续元素一起使用。

您可能必须根据情况调整伪元素中使用的不同值：

div {
  padding: 10px;
  border: solid 2px;
  border-radius: 10px;
  display: inline-block;
  position: relative;
}

div + div:before,
div + div:after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 8px;
  border: 2px solid;
  background: #fff;
}

div + div:before {
  border-left: 0;
  right: calc(100% + 4px);
}

div + div:after {
  border-right: 0;
  left: -2px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<span>--</span>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

<span>--</span>

<div>1</div>
<div>2</div>

<span>---</span>

<div>1</div>

如果容器内只有一组具有相同类型的连续元素，则可以尝试此操作。诀窍是避免使用border-radius的简写形式，以便它可以使用一个元素：

div {
  padding: 10px;
  border: solid 2px;
  display: inline-block;
  position: relative;
}

div:first-of-type {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

div:last-of-type {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<section>
  <span>---</span>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <span>---</span>
</section>
<section>
  <span>---</span>
  <div>1</div>
  <div>2</div>
  <span>---</span>
</section>
<section>
  <span>---</span>
  <div>1</div>
  <span>---</span>
</section>

如何在中间元素中添加某些CSS？

2 个答案: