html – 如何将某些CSS添加到中间元素？

我有这样的事情：

<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或类别甚至标签类型;然后我不能使用第一个孩子和最后一个孩子选择器.

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

提前致谢.

解决方法

一种只有选择器且不需要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>

html – 如何将某些CSS添加到中间元素？

解决方法

相关文章