CSS:nth-of-type() и: Not() селектор?

я плавал статьи бок о бок, которые имеют ширину 25%. Я добавляю clear:both после каждого четвертого элемента. Однако мне нужно вставить графический раздел-перерыв между элементами. И это должно быть внутри <ul>. Чтобы быть действительным, я обернул "section-break" (первый элемент li в образце ниже) в <li> как хорошо.

<ul>
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
</ul>

Я хочу, чтобы каждый четвертый элемент был разрывом строки, поэтому я использую ...

ul li:nth-of-type(4n+1) { clear: both; }

однако я хочу li.year не будет повлияло на это поведение, поэтому я попробовал это 

ul li:not(.year):nth-of-type(4n+1) { clear: both; }

прямо сейчас последний <li> в моем примере кода выше плавает в следующую строку, но это не должно произойти с первого <li> не является одной из плавающих статей, но содержит заголовок.

можно ли сложить :not и nth-of-type() селектор друг на друга?

11
css css-float css-selectors css3

2 ответов

селектор у вас есть --

ul li:not(.year):nth-of-type(4n+1) { background: yellow; }

-- совершенно верно (как показано, выделив селектор).

Проблема в том, как вы используете clear. Он работает, если вы используете clear:right, а потом clear:left на следующий элемент:

ul li:not(.year):nth-of-type(4n+1) { clear: right;  }
ul li:not(.year):nth-of-type(4n+2) { clear: left;  }

редактировать в комментарии вычеркнутый текст-чепуха. Реальная проблема, согласно ответу BoltClock, заключается в том, что :not псевдокласс не влияет на nth-of-type. Настройка смещения селектора работает в этом случае по совпадению, но не будет работать, если :not картина была иной.

ul li:not(.year):nth-of-type(4n+2) { clear: left;  }

http://jsfiddle.net/8MuCU/

7

причина :not() не работает, потому что li.year имеет тот же тип элемента, как и остальные li элементы (естественно), так :nth-of-type(4n+1) соответствует тем же элементам независимо от .year класса.

также невозможно последовательно складывать селекторы. Просто они так не работают.

так как вы не можете изменить свой li элементы к чему-то еще из-за правил разметки HTML и :nth-match() находится в будущее spec и еще не реализован, вы должны сделать с изменением вашего :nth-of-type() формула для размещения структуры вместо:

ul li:not(.year):nth-of-type(4n+2) { clear: both; }
5