Не удается добавить несколько псевдоклассов в псевдокласс: not () - PullRequest
Новая
       33

Не удается добавить несколько псевдоклассов в псевдокласс: not ()

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

Я пытаюсь применить стиль к каждому элементу, кроме первого и последнего.Есть много способов сделать это, я знаю.Но я сталкиваюсь со странным поведением (я верю?).

Если я использую псевдокласс :not() в ассоциации, например, с :last-child, он будет работать нормально.Но как только я добавлю второй псевдокласс (скажем, :first-child), он не будет работать.

Вот и мы 

.div-list {
  width:100px;
  height:400px;
}

.div-list div {
  width:25%;
  height:25%;
  background-color:green;
}
.div-list div:not(:last-child) {
  background-color:red;
}

.div-list div:not(:last-child,:first-child) {
  border:1px solid blue;
}
<div class='div-list'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Обратите внимание, что я знаю о стандарте и, очевидно, мой синтаксис "теоретически" правильный.Я не прав?

Ответы [ 2 ]

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

Несколько селекторов классов to: not поддерживается только в CSS-селекторах уровня 4 и работает не во всех браузерах.В настоящее время он работает только в Safari, вместо этого вы можете использовать несколько :not

.div-list div:not(:last-child):not(:first-child) {
  border:1px solid blue;
}

Проверьте browser support doc

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

Скорее используйте этот селектор, который использует 2 не селекторы, как если бы вы сказали, что не последний и не первый дочерний элемент: 

.div-list div:not(:last-child):not(:first-child)


.div-list {
  width: 100px;
  height: 400px;
}

.div-list div {
  width: 25%;
  height: 25%;
  background-color: green;
}

.div-list div:not(:last-child) {
  background-color: red;
}

.div-list div:not(:last-child):not(:first-child) {
  border: 1px solid blue;
}
<div class='div-list'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
...