Как добавить определенный CSS к средним элементам? - PullRequest
Новая
       1

Как добавить определенный CSS к средним элементам?

0 голосов
/ 03 февраля 2019

У меня есть что-то вроде этого: 

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

Это вывод:

enter image description here

но я пытаюсь получитьэто:

enter image description here

Обратите внимание, что нет определенного родителя со специальным ID или class или даже tag type;тогда я не могу использовать селекторы first-child и last-child.

А также, я не могу использовать (и не хочу использовать) специальные классы для средних элементов или углов.Мне просто интересно узнать, есть ли способ получить его без использования классов и неограниченного количества одинаковых элементов, близких друг к другу.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Хакерский способ с использованием только + селектора и без необходимости 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>
0 голосов
/ 03 февраля 2019

Да, вы можете сделать так: 

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...