Home-theater-designers
Както всички CSS селектори, можете да използвате :nth-child(), за да идентифицирате елементи в уеб страница и да приложите стилове към тях. Но този селектор ви позволява да стесните набор от братя и сестри въз основа на тяхната относителна позиция.
MUO Видео на деня ПРЕВЪРТЕТЕ, ЗА ДА ПРОДЪЛЖИТЕ СЪС СЪДЪРЖАНИЕТО
Селекторът поддържа някои основни ключови думи за общи случаи, но също така предоставя мощен синтаксис за съвпадение на шаблони. Използвайки го, можете да изберете елементи въз основа на редовни, повтарящи се модели или по-сложни дефиниции, въз основа на вашите нужди.
Синтаксисът на селектора :nth-child().
Като Селектор на CSS псевдокласове , синтаксисът :nth-child() се различава от другите селектори. Той приема аргумент като модел за съвпадение на елементи в набор от братя и сестри:
:nth-child(args) {
/*...*/
}
Основният акцент е върху аргументите в скобите. Тези аргументи дефинират подмножеството от елементи за избор.
Използване на стойности на ключови думи за често срещани случаи
Този селектор може да побере две стойности на ключови думи: странно и дори . Те са особено полезни за стилизиране на алтернативни редове в таблица .
Един прост подреден списък е друг добър пример за това кога можете да използвате тези стойности на ключови думи:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Използвайки :n-то дете(нечетно) селектор, можете да промените цвета на всеки алтернативен елемент:
:nth-child(odd) {
color: red;
}
Елементите започват с индекс 1, така че първият елемент ще се появи в червено, след това третият и така нататък:
Функционална нотация за повече гъвкавост
Можете да използвате едно цяло число, за да изберете отделен елемент, като това:
li:nth-child(4) {
color: red;
}
В този случай селекторът отговаря само на четвъртия елемент в списъка:
Този синтаксис е специален случай на по-общия функционален синтаксис, който избира елементи, които отговарят на даден модел. Този синтаксис е:
:nth-child(An+B) {
/*...*/
}
В тази нотация, А е размерът на стъпката. Това означава колко пъти селекторът се движи, за да изберете следващия елемент. Позволява ви да изберете всеки друг елемент, всеки трети елемент и т.н. Б е началната точка, от която започва селекцията.
какво означава tbh във фейсбук
Например вземете аргумента 3n+1:
li:nth-child(3n+1) {
color: red;
}
Това ще започне селекцията от първия елемент и ще продължи с всеки трети елемент след това:
Сравнете това с израза 3n+2:
li:nth-child(3n+2) {
color:red;
}
Това все още избира всеки трети елемент, но сега започва от втория елемент в списъка:
Друг интересен пример е :nth-child(n+3):
li:nth-child(n+3) {
color: red;
}
Този ще избере всеки елемент (n), започвайки от третия (+3). Ще изглежда така:
Можете също да използвате изваждане, за да постигнете определени резултати:
li:nth-child(3n-1) {
color: red;
}
Този пример все още избира всеки трети елемент, но започва от „минус първи“. На практика това означава, че ще избере втория елемент в списъка, след това петия и така нататък:
Синтаксисът на <селектор>
Можете също да използвате ключовата дума на последвано от a селектор като аргумент в селектора :nth-child(). Този синтаксис ви позволява да стесните възможните елементи, от които обикновеният шаблон избира.
Например, представете си, че вашето маркиране е по-сложно от оригинала:
<ol>
<li class="old">Item 1</li>
<li class="new">Item 2</li>
<li class="new">Item 3</li>
<li class="old">Item 4</li>
<li class="new">Item 5</li>
<li class="new">Item 6</li>
<li class="new">Item 7</li>
</ol>
Сега използвайте :nth-child, за да изберете четните елементи от набора от тези със специфичен клас:
можете ли да изтеглите предавания от hulu
.new {
font-weight: bold;
}
li:nth-child(even of.new) {
color: red;
}
Забележете как само четните удебелени елементи са червени:
Също така помислете как това се различава от li.new:nth-child(even) който цели .нови елементи, но само ако са четни. Това биха били елементи 2 и 6 в горния пример.
Работа със селектора :nth-child().
Можете да постигнете уникален дизайн с помощта на селектора :nth-child(). Можете да създавате цветни уебсайтове и да подчертавате редове и колони в таблици с данни. Комбинирането му с други CSS селектори ще ви помогне да създадете сложни оформления и дизайни.