Html 如何将某些CSS添加到中间元素？_Html_Css_Css Selectors

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

html css

Html 如何将某些CSS添加到中间元素？,html,css,css-selectors,Html,Css,Css Selectors,我有这样的想法： <html> <head> <style> div { padding: 10px; border: solid 2px; border-radius: 10px; display: inline-block; } div + div { border-radius:

我有这样的想法：

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

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


div{
填充：10px；
边框：实心2px；
边界半径：10px；
显示：内联块；
}
div+div{
边界半径：0px；
}
1.
2.
3.
4.

这是输出：

但我正试图做到这一点：

请注意，没有任何特定的父项具有特殊的

ID

或

class

或甚至

标记类型

；然后我不能使用

第一个孩子

和

最后一个孩子

选择器

而且，我不能（也不想）为中间元素或角点使用特殊类。我只是想知道是否有任何方法可以在不使用类的情况下，在无限数量的相同元素中彼此靠近

提前谢谢。

是的，您可以这样做：

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

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

或者，根据具体情况，可能更简单，如下所示：

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

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

一种只使用

选择器而不需要

nth-*

选择器的简陋方法，它可以处理任何具有相同类型的连续元素集

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

div{
填充：10px；
边框：实心2px；
边界半径：10px；
显示：内联块；
位置：相对位置；
}
div+div:之前，
div+div：之后{
内容：“；
位置：绝对位置；
顶部：-2px；
底部：-2px；
宽度：8px；
边框：2倍实心；
背景：#fff；
}
div+div:之前{
左边框：0；
右：计算（100%+4px）；
}
div+div：之后{
右边界：0；
左：-2px；
}

1
2.
3.
4.
--
1.
2.
3.
4.
--
1.
2.
---
1

确定您将拥有一个容器，还是会有其他元素作为同级元素？不管结构是随机的，肯定有一些特殊性。你能改变HTML吗？在之间添加元素？添加任何容器？

那么我就不能使用第一个孩子和最后一个孩子选择器。

-->不需要任何类、标记和ID来使用它们，所以无论您选择什么HTML，都可以使用它们have@TemaniAfif是的，将有其他元素（其他类型）作为同级元素。您可以展示一个具有所有约束的示例吗？如果他不能使用最后一个子元素，我怀疑他能用最后一种。。。如果我们可以，那么你可以首先考虑类型，我相信他认为他不能，因为它是一个必要的父母。另外，我不认为还有其他简单的方法。你仍然可以将这个

div+div:last of type

简化为这个

div:last of type

，使它与两个元素一起工作，除非它不工作。这个答案不是只与一个div一起工作。这是一种修复一个div的方法吗？谢谢你的好解决方案。