如何将CSS添加到中间元素？

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甚至tag type;然后我不能使用first-child和last-child选择器。

而且，我不能使用（我不想使用）中间元素或角落的特殊类。我只是想知道是否有任何方法可以不使用类和无限数量的相同元素彼此接近。

提前致谢。

Answer 1

只有+选择器而且不需要nth-*选择器的hacky方式，它可以使用相同类型的任何连续元素集。

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

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>

Answer 2

是的，你可以这样做：

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;
}

如何将CSS添加到中间元素？

问题描述投票：3回答：2

2个回答

最新问题

如何将CSS添加到中间元素？

问题描述 投票：3回答：2

2个回答

最新问题

问题描述投票：3回答：2