можете да го развалите, този сериен номер на йога ще бъде третият (третият дъщерен елемент на вашия баща ). За да стилизираме тези елементи, трябва да изберем псевдоклас :n-то дете.

Да вземем например:

Първото h2 заглавие на основния етикет

• един
• две
• три

Друг h2 заглавие на етикета body

:n-то детестилизирахме елементите

і

, yakí може да пее серийния номер на дъщерния елемент в средата на бащините елементи.

Резултатът от задника ни:

Стилизация по ключова дума

Какво е значението на псевдокласата :nth-child()могат да действат като пореден номер на дъщерните елементи, както е необходимо за стилизиране, и ключови думи, тъй като те могат да обозначават цяла група елементи. Като ключова дума можете да спечелите две значения:

• дори (мъжки елементи)
• нечетен (несдвоени елементи)

Стилизирането на елементи въз основа на различни ключови думи може да се използва по-широко, така че можете да изберете и стилизирате мъжки или несдвоени дъщерни елементи в документ.

Например, нека създадем две прости таблици с различни стилови класове и нека да разгледаме разликите в стойността на ключовите думи за псевдокласа :n-то детеза HTML елемент , Което обозначава ред от таблици:

Значение дори (момчета)

1 ред	Позиция	Kіlkіst
2 ред
3 ред
4 ред
5 ред

Нечетна стойност (несдвоени)

1 ред	Позиция	Kіlkіst
2 ред
3 ред
4 ред
5 ред

Чието приложение към псевдокласа на победите :nth-child()стилизирахме момчетаредове на първата таблица (елементи ) че несдвоенина друга маса.

Стилизация зад проста математическа формула

псевдоклас :nth-child()ви позволява да избирате като двойки, раздвоявания, chi дъщерни елементи с първия сериен номер и th дъщерни елементи, дадени от елементарна математическа формула. Нека да разгледаме следващия селектор и да разберем какво означава този запис:

td:nth-child(4n+2)

) в средата на реда, започвайки от друг в средата на таблицата, ще бъде стилизиран:

• 4n- Кожен четвърти елемент.
• 2

Разрешено е формулите да имат различно значение със знак за разпознаване, но няма необходими неща:

td:nth-child(4n-1)(фонов цвят: светлосин; / * задаване на фонов цвят * / )

Този селектор означава, че кожата на четвъртините от средата на масата ( ) в средата на реда, започвайки от третата среда на таблицата (няма -1 среда по обективни причини, това ще бъде унищожено вляво), ще бъде стилизирано:

• 4n- Кожен четвърти елемент.
• -1 - Поправете някой елемент.

Нека да разгледаме примера на Виктория:

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Избрахме и стилизирахме кожата на четвъртините на средата на масата ( ) в средата на реда, започвайки от друг в средата на масата. Резултатът от задника ни:

basicweb.ru

Как да използвате n-то дете CSS селектор

CSS има селектор, което е по-точно, псевдо-селектор, на n-то дете заглавия. задника на Його Виктория:

Ul li:nth-child(3n+3) ( цвят: #ccc; )

CSS за тропане: zastosovuyu стилове за кожата на третия елемент в неподреден списък. А 3-та, 6-та, 9-та, 12-та е твърде тънка. Але, как става? И също така, как можете да вземете vigoda, vikoristuuchi nth-child?

Основното усещане е по-силно при завоите при слепоочията. nth-child приема две ключови думи: дори(човек) това странно(Несдвоен). Sens е направо луд. Четни изберете сдвоени елементи (2, 4, 6), нечетни - несдвоени (1, 3, 5).

Както е показано в задната част, n-тото дете може да бъде преобразувано във вирази. Кой е възможно най-простият вираз? Просто число. Ако напишете число в дъги, тогава ще бъде събран един единствен елемент. Например изберете петия елемент от списъка:

Ul li:nth-child(5) ( цвят: #ccc; )

Нека се обърнем към нашия първи задник, при yakum mi vikorista viraz (3n + 3). как работиш Защо избирате кожата на третия елемент? Цялата същност на промяната n. Ще приеме нула или повече стойности. Нека да разгледаме доклада:

(3 x 0) + 3 = 3 = 3-ти елемент (3 x 1) + 3 = 6 = 6-ти елемент (3 x 2) + 3 = 9 = 9-ти елемент и т.н.

Сега нека опитаме този вирус: nth-child(2n+1):

(2 x 0) + 1 = 1 = първи елемент (2 x 1) + 1 = 3 = трети елемент (2 x 2) + 1 = 5 = 5-ти елемент и т.н.

Резултатите бяха взети от същите тези неща, които бяха спечелени чрез коефициенти, така че не можете често да използвате такъв вираз за такъв ранг. Освен това първият ни задник също може да бъде променен и заменен от оригиналната virase (3n + 3), virase (3n):

(3 x 0) + 0 = 0 = няма валидност (3 x 1) + 0 = 3 = 3-ти елемент (3 x 2) + 0 = 6 = 6-ти елемент и т.н.

Yak bachite, резултатът е същият, но не е нужно да пишете "+3". Можем да намерим и отрицателна стойност във viraz. Например 4n-1:

(4 x 0) - 1 = -1 = няма валидност (4 x 1) - 1 = 3 = трети елемент (4 x 2) - 1 = 7 = 7-ми елемент и т.н.

Броят на отрицателните стойности за коефициента при n изглежда невероятно, защото разликата няма да бъде намерена в отрицателен резултат. Ще трябва постоянно да променяте вируса, за да добавите положителни елементи. Както се оказа, този pidkhid вече беше умен избор на първите n елемента. Нека да разгледаме дупето с "-n + 3":

0 + 3 = 3 = 3-ти елемент -1 + 3 = 2 = 2-ри елемент -2 + 3 = 1 = 1-ви елемент -3 + 3 = 0 = няма валидност

Кросбраузър

nth-child е един от най-важните атрибути, макар и междубраузърни, отвъд реабилитацията на абсолютната нула в IE, като 8-ма версия. Тоест, ако езикът е около його обрата, тогава резултатът е окован свят на визуален ефект (например ред от редове от таблици, например), тогава това е идеален пидхид. Але, може би, не varto vikoristovuvat yogo за нещо важно, че можете да се забиете, например, върху правилността на оформлението.

Очевидно, ако използвате jQuery, тогава не е нужно да се притеснявате за начина, по който jQuery работи в Internet Explorer.

Е, намкинец

Можете да играете с различни видове за селектора от страната на дупето.

www.css-tricks.ru

Стойност

Стойност	Описание
Номер	Положителното число е 1. Указва номера на елемента, който искаме да върнем. Номерирането на елементите започва от първия.
странно	Несдвоени елементи.
дори	Елементи за четене.
Вираз	Възможно е да се съберат специални редове с буквата n, което означава всички цели числа на числото víd нула (не като единица!)до неизвинение. И така, 2n означава всички двойки числа (започвайки от друга). Как разбирате? Заместете в n последователно числа като 0 и т.н.: ако n = 0, тогава 2n дава 0 такъв елемент не може да бъде ( номерация на елементи от 1!), ако n = 1, тогава 2n дава 2 друг елемент, ако n = 2, 2n дава 4 - четвъртия елемент. Как се пише 3n - ще има трети елемент (започвайки от третия!) и т.н.

Приложи

Задник

В този задник имаме яркочервен цвят, който е 4-ти грайфернеговият баща (4-ти в средата ol):

Резултат от кода на vikonanny:

Задник

Niní chervonimi zrobimo всичко момчетали:

Резултат от кода на vikonanny:

Задник

Niní chervonimi zrobimo всичко несдвоенили:

Резултат от кода на vikonanny:

Задник

Niní chervonimi zrobimo кожа трета li (започвайки от третата):

Резултат от кода на vikonanny:

Задник

Селекторът може да посочи диапазон от елементи. Да приемем, че имате списък от 20 елемента и трябва да изберете елементи от 7 до 14 включително. Можете да го ограбите така:

Резултат от кода на vikonanny:

code.mu

Синтаксис

Псевдокласът nth-child, определен с един аргумент, който представлява модела за съвпадащи елементи.

Стойности на ключови думи

нечетен Представлява елементи, чиято цифрова позиция в поредица от братя и сестри е нечетна: 1, 3, 5 и т.н. even Представлява елементи, чиято числова позиция в серия братя и сестри е четна: 2, 4, 6 и т.н.

функционална нотация

Представлява елементи като числова позиция в поредица от братя и сестри съвпада с модела An+B за всяко положително цяло число или нулева стойност на n. индексът на първия елемент е 1. И двете стойности A и B трябва да бъдат с.

Формален синтаксис

:n-то дете( [на ]?)

където
= дори странно
=

където
=

където
=
= ">" " " "~" " "

където
=

CSS има селектор, което е по-точно, псевдо-селектор, на n-то дете заглавия. задника на Його Виктория:

Ul li:nth-child(3n+3) ( цвят: #ccc; )

CSS за тропане: zastosovuyu стилове за кожата на третия елемент в неподреден списък. А 3-та, 6-та, 9-та, 12-та е твърде тънка. Але, как става? И също така, как можете да вземете vigoda, vikoristuuchi nth-child?

Основното усещане е по-силно при завоите при слепоочията. nth-child приема две ключови думи: дори(човек) това странно(Несдвоен). Sens е направо луд. Четни изберете сдвоени елементи (2, 4, 6), нечетни - несдвоени (1, 3, 5).

Както е показано в задната част, n-тото дете може да бъде преобразувано във вирази. Кой е възможно най-простият вираз? Просто число. Ако напишете число в дъги, тогава ще бъде събран един единствен елемент. Например изберете петия елемент от списъка:

Ul li:nth-child(5) ( цвят: #ccc; )

Нека се обърнем към нашия първи задник, при yakum mi vikorista viraz (3n + 3). как работиш Защо избирате кожата на третия елемент? Цялата същност на промяната n. Ще приеме нула или повече стойности. Нека да разгледаме доклада:

(3 x 0) + 3 = 3 = 3-ти елемент (3 x 1) + 3 = 6 = 6-ти елемент (3 x 2) + 3 = 9 = 9-ти елемент и т.н.

Сега нека опитаме този вирус: nth-child(2n+1):

(2 x 0) + 1 = 1 = първи елемент (2 x 1) + 1 = 3 = трети елемент (2 x 2) + 1 = 5 = 5-ти елемент и т.н.

Резултатите бяха взети от същите тези неща, които бяха спечелени чрез коефициенти, така че не можете често да използвате такъв вираз за такъв ранг. Освен това първият ни задник също може да бъде променен и заменен от оригиналната virase (3n + 3), virase (3n):

(3 x 0) + 0 = 0 = няма валидност (3 x 1) + 0 = 3 = 3-ти елемент (3 x 2) + 0 = 6 = 6-ти елемент и т.н.

Yak bachite, резултатът е същият, но не е нужно да пишете "+3". Можем да намерим и отрицателна стойност във viraz. Например 4n-1:

(4 x 0) - 1 = -1 = няма валидност (4 x 1) - 1 = 3 = трети елемент (4 x 2) - 1 = 7 = 7-ми елемент и т.н.

Броят на отрицателните стойности за коефициента при n изглежда невероятно, защото разликата няма да бъде намерена в отрицателен резултат. Ще трябва постоянно да променяте вируса, за да добавите положителни елементи. Както се оказа, този pidkhid вече беше умен избор на първите n елемента. Нека да разгледаме дупето с "-n + 3":

0 + 3 = 3 = 3-ти елемент -1 + 3 = 2 = 2-ри елемент -2 + 3 = 1 = 1-ви елемент -3 + 3 = 0 = няма валидност

Кросбраузър

nth-child е един от най-важните атрибути, макар и междубраузърни, отвъд реабилитацията на абсолютната нула в IE, като 8-ма версия. Тоест, ако езикът се отнася до пеенето на його, тогава резултатът е окован свят на визуален ефект (например ред линии в таблица за пеене), тогава това е идеален пидхид. Але, може би, не varto vikoristovuvat yogo за нещо важно, че можете да се забиете, например, върху правилността на оформлението.

Очевидно, ако използвате jQuery, тогава не е нужно да се притеснявате за начина, по който jQuery работи в Internet Explorer.

Е, намкинец

Можете да играете с различни типове за включен селектор

Описание

Псевдокласът :nth-child е оправдан за стилизиране на елементи въз основа на номерирането в дървото на елементите.

Синтаксис

елемент:n-то дете(нечетно | четно |<число> | <выражение>) {...}

Стойност

нечетен Трябва да има несдвоени номера на елементи. дори Мустакатите имат номера на елементите. Поредният номер на дъщерния елемент на бащата на детето. Номерацията започва от 1, така че ще бъде първият елемент в списъка. viraz Задайте като an+b, където a и b са числа, а n е число, което автоматично задава стойността 0, 1, 2...

Ако a е равно на нула, то не се записва и записът се съкращава на b. Ако b е равно на нула, то също не се посочва и се записва във формата an. a и b могат да бъдат отрицателни числа, когато знакът плюс се променя на минус, например: 5n-1.

За rahunka vykoristannya отрицателни стойности a и b deakí резултатите могат да бъдат отрицателни или равни на нула. Но към елементите се добавят повече положителни стойности чрез тези, чието номериране на елементите започва от 1.

На масата 1 се предполага, че е възможно да се сортират ключовите думи, като също така е посочено, че ще се задават номера на елементите.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Нафта	16	34	62	74	57
злато	4	69	72	56	47
дърво	7	73	79	34	86
камъни	23	34	88	53	103

В този задник псевдо-класът :nth-child ще промени стила на първия ред на таблицата и ще вдъхнови цветовата визия на всички сдвоени редове (фиг. 1).

Facebook

Twitter

Във връзка с

Google+

Ай Пад