У меня есть следующий код HTML:
<ul>
<li>number 1</li>
<li>number 2</li>
<li>number 3</li>
<li>number 4</li>
<li>number 5</li>
<li>number 6</li>
<li>number 7</li>
<li>number 8</li>
<li>number 9</li>
<li>number 10</li>
</ul>
Как я могу использовать псевдоклассы CSS3 для создания какого-либо элемента li, который не является первым или последним, имеет background-color of tomato например? Кажется, что я мог бы использовать селектор :not.
Два способа:
вы можете установить общее правило, а затем переопределить его для элементов :first-child и :last-child. Это соответствует силам CSS:
li { background: red; }
li:first-child, li:last-child { background: white; }
Или вы можете использовать ключевое слово :not, комбинированное с двумя:
li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }
Из двух лично я предпочитаю первое - легче понять и поддерживать (на мой взгляд).
Вот ручка http://codepen.io/vendruscolo/pen/AeHtG
Вам нужно объединить два псевдо-класса :not():
li:not(:first-child):not(:last-child) {
background: red;
}
Здесь документация MDN: как указано там, она не поддерживается в IE < 9, в то время как он хорошо поддерживается в других браузерах.
Если вам нужна поддержка IE 8, вам нужно полагаться на Javascript или использовать другой класс, чтобы указать, какой элемент является последним. На самом деле IE 8 (и ниже) не поддерживает псевдо-класс :last-child.