CSS :nth-of-type() and :not() selector?

前端 未结 2 2116
栀梦
栀梦 2021-02-12 22:44

I have floated articles side by side that are 25% wide. I\'m adding a clear:both after every fourth element. However I need to insert a graphical section-break inbe

2条回答
  •  南旧
    南旧 (楼主)
    2021-02-12 23:46

    The reason your :not() doesn't appear to work is because the li.year is of the same element type as the rest of your li elements (naturally), so :nth-of-type(4n+1) matches the same elements regardless of the .year class.

    It's not possible to stack selectors sequentially either. That's just not how they work.

    Since you can't change your li elements to something else because of HTML markup rules, and :nth-match() is in a future spec and hasn't been implemented yet, you have to make do with changing your :nth-of-type() formula to accommodate the structure instead:

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

提交回复
热议问题