Говорит, что у меня 10 <p>, как ограничить их до 5, спрятав еще 5 с помощью css? я должен делать 5 уроков, как nth-child? Можно ли использовать условие в css? Поскольку числа <p> динамические, они могут быть 20, 30 или 100.

css
0
dfox 6 Сен 2016 в 05:54

3 ответа

Лучший ответ

Вы можете использовать селектор nth-child(n+x), например:

p:nth-child(n+6) {
  display:none;  
}

Вот скрипка, демонстрирующая красный цвет для 6+

n+6 - это сокращение от формулы уравнения an+b (см. specs и mdn), которые повторяется для всех значений «n», которые> = 0 и где a и b - целые числа> 0. Таким образом, полная формула в этом случае эквивалентна:

1n+6

Что для значений n как 0,1 .. даст: 6,7 ... соответствие 6-го и более тегов.

Изменяя b, мы можем создавать такие интервалы, как:

2n+6

Что для значений n, равных 0,1, теперь дает 6, 8, 10 и так далее, что эффективно соответствует любому другому тегу p, начиная с 6-го.

2
cyberwombat 6 Сен 2016 в 04:40

Изменить: добавление к принятому ответу.

Определить диапазон - выбор элементов между 2 to 10.

:nth-child(n+2):nth-child(-n+10)

Выберите четные элементы в этом диапазоне.

:nth-child(n+2):nth-child(-n+10):nth-child(even)

Выберите нечетные элементы в этом диапазоне.

:nth-child(n+2):nth-child(-n+10):nth-child(odd)

Оценка формулы an+b следует за Оператором Приоритет и его значение всегда является целым неотрицательным числом .

Примечание. В этой формуле нельзя делить или добавлять десятичные дроби.

0
AA2992 6 Сен 2016 в 05:29

Если вы открыты для jquery, вы можете использовать: $('p:gt(5)').hide();, который скроет все элементы <p> после 5-го.

0
Jesse Elser 6 Сен 2016 в 03:05