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

概述我有这样的事情： <html><head> <style> div { padding: 10px; border: solid 2px; border-radius: 10px; display: inline-block; } div + 我有这样的事情：

<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添加到中间元素？全部内容，希望文章能够帮你解决html – 如何将某些CSS添加到中间元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1039512.html