Jquery last child: html — Find last child element in the parent element using jQuery
Селектор | Примере | Выбирает |
---|---|---|
* | $(«*») | Все элементы |
#id | $(«#lastname») | Элемент с |
.class | $(«.intro») | Все элементы с |
.class,.class | $(«.intro,.demo») | Все элементы с классом «intro» или «demo» |
element | $(«p») | Все элементы < p > |
el1,el2,el3 | $(«h2,div,p») | Все элементы < h2 >, < div > и < p > |
:first | $(«p:first») | Первый элемент < p > |
:last | $(«p:last») | Последний элемент < p > |
:even | $(«tr:even») | Все элементы, даже < TR > |
:odd | $(«tr:odd») | Все нечетные < TR > элементы |
:first-child | $(«p:first-child») | Все элементы < p >, являющиеся первыми дочерними элементами родительского элемента |
:first-of-type | $(«p:first-of-type») | Все < p > элементы, являющиеся первыми элементами < p > родительского элемента |
:last-child | $(«p:last-child») | Все элементы < p >, являющиеся последним дочерним элементом родительского элемента |
:last-of-type | $(«p:last-of-type») | Все элементы < p >, являющиеся последним элементом < p > родительского элемента |
:nth-child(n) | $(«p:nth-child(2)») | Все < p > элементы, являющиеся вторым дочерним элементом родительского элемента |
:nth-last-child(n) | $(«p:nth-last-child(2)») | Все < p > элементы, являющиеся вторым дочерним элементом родительского элемента, считая от последнего дочернего элемента |
:nth-of-type(n) | $(«p:nth-of-type(2)») | Все < p > элементы, являющиеся вторым < p > элементом родительского элемента |
:nth-last-of-type(n) | $(«p:nth-last-of-type(2)») | Все < p > элементы, являющиеся вторым < p > элементом родительского элемента, считая от последнего дочернего объекта |
:only-child | $(«p:only-child») | Все элементы < p >, являющиеся единственным дочерним элементом родительского элемента |
:only-of-type | $(«p:only-of-type») | Все элементы < p >, являющиеся единственными дочерними элементами своего типа родительского объекта |
parent > child | $(«div > p») | Все элементы < p >, являющиеся прямым дочерним элементом элемента < div > |
parent descendant | $(«div p») | Все элементы < p >, являющиеся потомками элемента < div > |
element + next | $(«div + p») | Элемент < p >, который находится рядом с каждым элементом < div > |
element ~ siblings | $(«div ~ p») | Все элементы < p >, являющиеся братьями и сестрами элемента < div > |
:eq(index) | $(«ul li:eq(3)») | Четвертый элемент в списке (индекс начинается с 0) |
:gt(no) | $(«ul li:gt(3)») | Элементы списка с индексом больше 3 |
:lt(no) | $(«ul li:lt(3)») | Элементы списка с индексом менее 3 |
:not(selector) | $(«input:not(:empty)») | Все входные элементы, которые не являются пустыми |
:header | $(«:header») | Все элементы заголовка < h2 >, < h3 >. .. |
:animated | $(«:animated») | Все анимированные элементы |
:focus | $(«:focus») | Элемент, который в данный момент имеет фокус |
:contains(text) | $(«:contains(‘Hello’)») | Все элементы, содержащие текст «Hello» |
:has(selector) | $(«div:has(p)») | Все элементы < div >, имеющие элемент < p > |
:empty | $(«:empty») | Все пустые элементы |
:parent | $(«:parent») | Все элементы, являющиеся родительскими для другого элемента |
:hidden | $(«p:hidden») | Все скрытые < p > элементы |
:visible | $(«table:visible») | Все видимые таблицы |
:root | $(«:root») | Корневой элемент документа |
:lang(language) | $(«p:lang(de)») | Все < p > элементы со значением атрибута lang, начинающимся с «de» |
[attribute] | $(«[href]») | Все элементы с атрибутом href |
[attribute=value] | $(«[href=’default. =’Tom’]») | Все элементы со значением атрибута Title, начинающимся с «Tom» |
[attribute~=value] | $(«[title~=’hello’]») | Все элементы со значением атрибута Title, содержащим определенное слово «hello» |
[attribute*=value] | $(«[title*=’hello’]») | Все элементы со значением атрибута Title, содержащим слово «hello» |
:input | $(«:input») | Все входные элементы |
:text | $(«:text») | Все входные элементы с type=»text» |
:password | $(«:password») | Все входные элементы с type=»password» |
:radio | $(«:radio») | Все входные элементы с type=»radio» |
:checkbox | $(«:checkbox») | Все входные элементы с type=»checkbox» |
:submit | $(«:submit») | Все входные элементы с type=»submit» |
:reset | $(«:reset») | Все входные элементы с type=»reset» |
:button | $(«:button») | Все входные элементы с type=»button» |
:image | $(«:image») | Все входные элементы с type=»image» |
:file | $(«:file») | Все входные элементы с type=»file» |
:enabled | $(«:enabled») | Все включенные входные элементы |
:disabled | $(«:disabled») | Все отключенные входные элементы |
:selected | $(«:selected») | Все выбранные входные элементы |
:checked | $(«:checked») | Все проверенные входные элементы |
Псевдоклассы nth-child и nth-last-child CSS
Псевдокласс :nth-child
используется для добавления стиля к элементам на основе нумерации в родительском элементе. В значении может быть указан как порядковый номер элемента:
ul li:nth-child(1) {...}
Так и выражение, которое задается в виде an+b
, где a
и b
целые числа, а n
— счетчик, который автоматически принимает значение 0, 1, 2 и т.д.
:nth-child(3n+2) или :nth-child(-n+3)
Также доступны значении odd
и even
, которые определяют четные и нечетные элементы.
Псевдокласс :nth-last-child
делает все тоже самое, только с конца списка элементов.
Примеры использования у списка <ul>
:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
<li>30</li>
</ul>
1
Нечётные
Все нечётные номера элементов: 1, 3, 5, 7. ..
ul li:nth-child(odd) {
background: skyblue;
}
/* или */
ul li:nth-child(2n+1) {
background: skyblue;
}
2
Чётные
Чётные номера элементов: 2, 3, 6, 8…
ul li:nth-child(even) {
background: skyblue;
}
/* или */
ul li:nth-child(2n) {
background: skyblue;
}
3
Определенные номера
Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.
ul li:nth-child(2), ul li:nth-child(4), ul li:nth-child(6), ul li:nth-child(9) {
background: skyblue;
}
4
Каждый третий элемент
Элементы 3, 6, 9, 12…
ul li:nth-child(3n) {
background: skyblue;
}
5
Один через три
Элементы 1, 5, 9, 13. ..
ul li:nth-child(4n+1) {
background: skyblue;
}
6
Два через два
Элементы 1, 2, 5, 6, 9, 10…
ul > li:nth-child(4n+1), ul li:nth-child(4n+2) {
background: skyblue;
}
7
Два через три
Элементы 1, 2, 6, 7, 11, 12…
ul > li:nth-child(5n+1), ul li:nth-child(5n+2) {
background: skyblue;
}
8
Три через три
Элементы 1, 2, 3, 7, 8, 9…
ul > li:nth-child(6n+1), ul li:nth-child(6n+2), ul li:nth-child(6n+3) {
background: skyblue;
}
9
Первые десять
ul li:nth-child(-n+10) {
background: skyblue;
}
10
Диапазон
C третьего по пятнадцатый:
ul li:nth-child(n+3):nth-child(-n+15) {
background: skyblue;
}
11
Все, после десятого
ul li:nth-child(n+11) {
background: skyblue;
}
12
Все, кроме последнего
ul li:nth-last-child(n+2) {
background: skyblue;
}
13
Последний элемент
ul li:nth-last-child(1) {
background: skyblue;
}
14
Последние три
ul li:nth-last-child(-n+3) {
background: skyblue;
}
Псевдокласс :nth-last-child | htmlbook.
ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
Версии CSS
Описание
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
Синтаксис
элемент:nth-last-child(odd | even | <число> | <выражение>) {…}
Значения
- odd
- Все нечетные номера элементов.
- even
- Все четные номера элементов.
- число
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
- выражение
- Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2. ..
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Значение | Номера элементов | Описание |
---|---|---|
1 | 1 | Последний элемент, является синонимом псевдокласса :last-child. |
5 | 5 | Пятый элемент с конца. |
2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even. |
2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd. |
3n+2 | 2, 5, 8, 11, 14 | — |
-n+3 | 3, 2, 1 | — |
5n-2 | 3, 8, 13, 18, 23 | — |
even | 2, 4, 6, 8, 10 | Все четные элементы. |
odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-last-child</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные границы */
border-spacing: 0; /* Расстояние между ячейками */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 3px; /* Поля в ячейках */
border-left: 3px double #333; /* Граница слева */
}
td:nth-last-child(2n+1) {
background: #f0f0f0; /* Цвет фона */
}
td:nth-child(1) {
border: 1px solid #333; /* Параметры рамки */
background: #cfc; /* Цвет фона */
}
</style>
</head>
<body>
<table>
<tr>
<td> </td><td>2134</td><td>2135</td>
<td>2136</td><td>2137</td><td>2138</td>
</tr>
<tr>
<td>Нефть</td><td>16</td><td>34</td>
<td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>4</td><td>69</td>
<td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>7</td><td>73</td>
<td>79</td><td>34</td><td>86</td>
</tr>
<tr>
<td>Камни</td><td>23</td><td>34</td>
<td>88</td><td>53</td><td>103</td>
</tr>
</table>
</body>
</html>
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
html — стиль последнего элемента, имеющего определенный класс
html — стиль последнего элемента, имеющего определенный класс — WordPress Development Stack Exchange
Сеть обмена стеков
Сеть Stack Exchange состоит из 177 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.
Посетить Stack Exchange
0
+0
- Авторизоваться
Зарегистрироваться
WordPress Development Stack Exchange — это сайт вопросов и ответов для разработчиков и администраторов WordPress. Регистрация займет всего минуту.
Зарегистрируйтесь, чтобы присоединиться к этому сообществу
Кто угодно может задать вопрос
Кто угодно может ответить
Лучшие ответы голосуются и поднимаются наверх
Спросил
Просмотрено
36k раз
Закрыто. Этот вопрос не по теме. В настоящее время он не принимает ответы.
Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме WordPress Development Stack Exchange.
Закрыт 4 года назад.
У меня есть такой код.
Я хочу стилизовать последний div с классом «активный». Есть какой-либо способ сделать это?
Создан 06 янв.
Джинс Джордж Джинс Джордж
4311 золотых знаков11 серебряных знаков55 бронзовых знаков
Нет (хорошего) способа решить эту проблему в ее текущем состоянии с помощью CSS. Лучшее решение — добавить дополнительный класс к последнему активному div или использовать javascript
.
Подробнее см. В этом вопросе
Создан 06 янв.
Сьорс Оттьес
1112 серебряных знаков33 бронзовых знака
0
Не тот ответ, который вы ищете? Посмотрите другие вопросы с метками html css select или задайте свой вопрос.
по умолчанию
WordPress Development Stack Exchange лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie
Настроить параметры
Комплексный взгляд на селекторы jQuery
Эта статья была рецензирована Мэттом Смитом и Тимом Севериеном.Спасибо всем рецензентам SitePoint за то, что они сделали контент SitePoint как можно лучше!
Если вы хотите манипулировать содержимым элемента на веб-странице, прикрепить к нему событие или сделать что-то еще, вам нужно сначала выбрать его. Здесь в игру вступают селекторы jQuery: они составляют важную часть библиотеки.
В этом уроке я расскажу обо всех этих селекторах и выделю важные вещи, о которых вам нужно помнить при их использовании.
Селекторы jQuery
Основная цель этих селекторов — выбрать элементы на веб-странице, которые соответствуют определенным критериям. Критерии могут быть любыми, такими как их идентификатор, имя класса, атрибуты или их комбинация. Большинство селекторов в jQuery основаны на существующих селекторах CSS, но в библиотеке также есть свои собственные селекторы.
Основные селекторы
Вы можете выбирать элементы на веб-странице, используя их ID $ ("# id")
, их класс $ (".class ")
или их имя тега $ (" li ")
. Вы также можете использовать комбинацию этих селекторов, например $ (". class tag ")
, или выбрать комбинированный результат нескольких селекторов, например $ (" selectorA , selectorB, selectorC ")
.
jQuery также предлагает несколько других основных селекторов, которые я перечислил ниже:
: выбор заголовка. Допустим, вам нужно выбрать все заголовки, например
,
,
в
.В этом случае вы можете использовать подробный селектор $ («раздел h2, раздел h3, раздел h4»)
или гораздо более короткий селектор$ («раздел: заголовок»)
. Оба будут выполнять одну и ту же работу, и последний сравнительно легче читать. Селектор заголовков установил желтый цвет фона всех заголовков в этой демонстрации.: целевой селектор — этот селектор возвращает элемент,
id
которого совпадает с идентификатором фрагмента или хешем URI документа.Например, если URI — «https://sitepoint.com/#hash». Затем селектор$ ("h3: target")
выберет элемент.
: анимированный селектор — этот селектор возвращает все элементы, для которых анимация выполняется, когда селектор запущен. Это означает, что любой элемент, анимация которого начинается после выполнения селектора, не будет возвращен. Также имейте в виду, что если вы используете пользовательскую сборку jQuery без модуля эффектов, этот селектор выдаст ошибку.В этой демонстрации только анимированная рамка становится оранжевой из-за переключателя.
Селекторы на основе индексов
Помимо основных селекторов, которые мы обсуждали выше, вы также можете выбирать элементы на основе их индекса. jQuery предоставляет собственный набор селекторов на основе индекса, которые используют индексирование с нуля. Это означает, что для выбора третьего элемента вам нужно будет использовать индекс 2.
Вот список всех селекторов на основе индекса:
- : eq (n) Selector — этот селектор вернет элемент с индексом
n
.Начиная с версии 1.8, он принимает как положительные, так и отрицательные значения индекса. Если указано отрицательное значение, отсчет происходит в обратном направлении от последнего элемента. - : lt (n) Selector — этот селектор вернет все элементы с индексом меньше
n
. Он также принимает как положительные, так и отрицательные значения, начиная с версии 1.8. Как и в случае с селектором: eq (n)
, когда задано отрицательное значение, отсчет происходит в обратном направлении от последнего элемента. - : gt (n) Selector — этот селектор аналогичен
: lt (n)
.Единственное отличие состоит в том, что он возвращает все элементы с индексом, большим или равнымn
. - : first Selector — вернет первый совпавший элемент DOM на веб-странице. Это эквивалентно
: eq (0)
и: lt (1)
. Одно различие между селекторами: first
и: first-child
заключается в том, что: first-child
может выбирать несколько элементов, каждый из которых является первым дочерним элементом своего родителя. - : последний селектор — этот селектор похож на селектор
: первый
, но вместо этого возвращает последний дочерний элемент. - : even Selector — вернет все элементы с четным индексом. Поскольку индексирование в jQuery начинается с нуля, селекторы выбирают первого дочернего элемента, третьего дочернего элемента и так далее. Это кажется нелогичным, но вот как это работает.
- : нечетный селектор — работает как селектор
: четный
, но возвращает элементы с нечетными индексами.
В следующем примере вы можете нажать на три кнопки : lt
, : gt
и : eq
, и они случайным образом сгенерируют индекс и применит полученный селектор к списку:
См. Селекторы на основе индекса пера от SitePoint (@SitePoint) на CodePen.
Как видите, использование : первые
и : последние
выбирает только соответствующие первый и последний элементы на веб-странице, а не внутри каждого родителя.
Дочерние селекторы
jQuery позволяет выбирать дочерние элементы элемента на основе их индекса или типа. Дочерние селекторы CSS отличаются от селекторов jQuery в том смысле, что они не используют индексирование с нуля.
Вот список всех дочерних селекторов:
: first-child — этот селектор возвращает все элементы, которые являются первыми дочерними элементами своего родителя.
: first-of-type — выбирает все элементы, которые являются первыми в своем роде среди многих других.
: last-child — Выберет последнего дочернего элемента родителя. Так же, как
: first-child
, он может выбирать несколько элементов в случае многих родителей.: last-of-type — выбирает всех дочерних элементов, которые являются последними в своем типе в родительском элементе. В случае нескольких родителей он может выбрать несколько элементов.
: nth-child () — Это немного сложновато. Он может принимать различные значения в качестве параметра, такие как число больше или равное 1, строки
, четные,
и, нечетные,
или уравнение, например,4n + 1
.: nth-last-child () — этот селектор похож на предыдущий и принимает те же параметры. Единственное отличие состоит в том, что он начинает отсчет с последнего ребенка.
: nth-of-type () — этот селектор возвращает все элементы, которые являются n-м потомком своего родителя по отношению к их братьям и сестрам с тем же именем.
: nth-last-of-type () — этот селектор работает так же, как селектор
: nth-of-type ()
, но подсчет начинается с конца.: only-child — Как следует из названия, этот селектор возвращает все элементы, которые являются единственными дочерними элементами своего родителя. Если у родителя более одного ребенка, ничего не будет выбрано.
: only-of-type — этот селектор возвращает все элементы, у которых нет братьев и сестер того же типа.
Эта интерактивная демонстрация покажет вам, как работают все эти селекторы.Как и в предыдущей демонстрации, все, что вам нужно сделать, это нажать на кнопки:
См. Дочерние селекторы пера от SitePoint (@SitePoint) на CodePen.
Обратите внимание, что на этот раз границы добавляются к первым
и последним
дочерним элементам в каждом div
отдельно.
Селекторы атрибутов
Вы также можете выбирать элементы на основе значений их атрибутов. При работе с этими селекторами вы должны помнить одну очень важную вещь: эти селекторы рассматривают несколько значений, разделенных пробелами, как одну строку. Например, $ ("a [rel = 'nofollow']")
не будет соответствовать $ ("a [rel = 'nofollow other']")
.
Вот список всех селекторов на основе атрибутов:
$ («[атрибут | =’ значение ’]») — «атрибут содержит селектор префикса» возвращает все элементы с атрибутами, значение которых равно или начинается с данной строки, за которой следует дефис.
$ («[атрибут * =’ значение ’]») — этот «атрибут содержит селектор» возвращает все элементы с атрибутами, значение которых содержит данную подстроку.Расположение значения не имеет значения. Пока он совпадает с заданным значением, селектор будет выбирать элемент.
$ («[атрибут ~ =’ значение ’]») — этот селектор возвращает все элементы с атрибутами, значение которых содержит заданное слово, разделенное пробелами.
\ $ («[attribute $ =’ value ’]») — этот селектор возвращает все элементы с атрибутами, значение которых заканчивается заданной строкой.
Эта демонстрация показывает, как каждый из этих селекторов ведет себя с разными значениями атрибутов: http: // codepen.io / brathi / pen / aZovZN
В этой демонстрации показаны три последних селектора в действии.
Если вы просто хотите проверить, имеет ли элемент указанный атрибут, и не заботитесь о его значении, вы можете использовать селектор $ ("[attribute]")
.
Селекторы содержимого
Эти селекторы основаны на содержимом внутри элементов. В этой категории четыре селектора.
: contains (text) — этот селектор возвращает все элементы, которые имеют указанный текст.Текст может появляться либо непосредственно внутри элемента, либо внутри одного из его потомков. При выборе элементов с помощью этого селектора помните, что текст чувствителен к регистру.
: has (selector) — возвращает все элементы, внутри которых есть хотя бы один элемент, соответствующий указанному селектору. Например,
$ ("section: has (h3)")
выберет все разделы, в которых есть элементh3
.h3
не обязательно должен быть прямым потомком.Он может существовать где угодно среди потомков.
В этой демонстрации показано, как : contains (text)
и : has (selector)
работают в разных ситуациях:
Демонстрация ясно показывает, как селектор : contains (text)
учитывает только регистр текста, который вы вводите. Пока текст и регистр полностью совпадают, селектор не заботится о том, что идет до или после текста.
: пусто — возвращает все элементы, у которых нет дочерних элементов, включая текстовые узлы.
: parent — этот селектор возвращает все элементы, у которых есть хотя бы один дочерний узел. Дочерний узел может быть либо элементом, либо текстовым узлом. В этом смысле он противоположен селектору
: пустой
.
Селекторы иерархии
Эти селекторы используют иерархию DOM в качестве критерия для выбора элементов, что объясняет название категории. Вот список всех таких селекторов:
$ («предок-потомок») — этот селектор возвращает все дочерние элементы данного родителя.Потомком может быть ребенок, внук и так далее.
$ («родительский> дочерний») — этот селектор более конкретен, чем предыдущий, и возвращает только прямых потомков родителя.
$ («prev + next») — этот селектор возвращает все элементы, соответствующие селектору
next
, имеют тот же родительский элемент, что иprev
, а также им непосредственно предшествует родственникprev
.$ («prev ~ siblings») — возвращает всех братьев и сестер, которые идут после элемента
prev
, имеют того же родителя, что иprev
, и соответствуют селекторуsiblings
.
В этой демонстрации показаны все селекторы иерархии в действии.
Как видно из демонстрации, селекторы «следующий соседний брат» и «следующий соседний элемент» не имеют никакого эффекта на предшествующих им братьев и сестер. По этой причине второй абзац просто синий, хотя он примыкает к элементу
.
Селекторы формы
jQuery предоставляет сокращенную версию селекторов для большинства входных элементов формы. Они относятся к категории селекторов форм.
Например, чтобы выбрать элемент кнопки или элементы с типом button, вы можете использовать более короткий селектор $ (": button")
вместо более длинного $ ("button, input [type = 'button']")
версия. Точно так же, чтобы выбрать все элементы с типом radio, вы можете использовать селектор $ (": radio")
вместо $ ("[type = radio]")
.
Эта демонстрация показывает, как можно использовать все эти селекторы для подсчета элементов в форме.
Вы также можете выбрать все элементы, которые включены или отключены с помощью селекторов $ (": enabled")
и $ (": disabled")
соответственно.Эти селекторы следует использовать только для элементов, которые поддерживают атрибут disabled, например,
,
и и т. Д.
Существует также селектор $ (": checked")
, который выбирает все элементы, которые либо отмечены, либо выбраны. Это относится к флажкам, переключателям и опциям , выберите
элементов. Если вы просто хотите получить параметры select
элементов, вы должны вместо этого использовать $ (": selected")
.
Желтая рамка вокруг различных элементов в этой демонстрации предполагает, что они были выбраны нашими конкретными селекторами.
Селекторы видимости
Есть еще два важных селектора, о которых вам следует знать:: visible и: hidden. Как следует из названий, они возвращают все видимые или скрытые элементы соответственно.
В jQuery элемент считается скрытым в четырех случаях:
- его отображение
Свойство
установлено нанет
, - его ширина
- любой из его предков скрыт, или
- это элемент формы с
type = "hidden"
.
Правило о высоте и ширине было изменено в jQuery 3, и это будет обсуждаться в следующем разделе.
Поскольку элементы с непрозрачностью, равной 0 или видимостью, установленной на скрытую, по-прежнему занимают место, они считаются видимыми. Это означает, что $ ("elem"). Css ("visibility", "hidden") .is (": hidden")
вернет false
.
Любой элемент с нулевой непрозрачностью будет по-прежнему считаться видимым, как видно из демонстрации ниже, где прозрачный div
получает оранжевый цвет из селектора : visible
:
См. Селекторы видимости пера от SitePoint (@SitePoint) на CodePen.
Изменения в jQuery 3
С выпуском jQuery 3 в отношении селекторов изменилось несколько вещей. Пользовательские селекторы, такие как : видимый
и : скрытый
, теперь в некоторых случаях работают до 17 раз быстрее.
Кроме того, с этого момента элемент будет считаться видимым, если у него есть поле макета, возвращенное методом getClientRects DOM , независимо от того, равна ли высота или ширина элемента нулю.
Библиотека теперь также будет выдавать ошибки, если строка селектора содержит только символ решетки.В предыдущих версиях $ ("#")
возвращали пустую коллекцию, а find ("#")
выдавали ошибку, но с этого момента они оба будут считаться недействительными.
Кэширование возвращенных элементов
jQuery позволяет легко выбирать любой элемент с помощью сложных селекторов. Например, чтобы выбрать все ссылки с классом externalLink
, вы можете просто использовать $ ("a .externalLink")
. Однако выбор таких элементов требует высокой производительности, потому что jQuery необходимо повторно сканировать DOM для каждого такого вызова.
Когда вам приходится использовать один и тот же селектор много раз, гораздо лучше кэшировать возвращаемый элемент (ы) в переменной. Это позволит избежать многократного сканирования и повысит производительность.
Например:
$ ("a .externalLink"). Click (function () {
$ ("a .externalLink"). removeClass ("отмечен");
$ ("a .externalLink"). addClass ("посещено");
});
можно записать как:
var $ linkExternal = $ ("a .externalLink");
$ linkExternal.click (function () {
$ linkExternal.removeClass ("отмечен");
$ linkExternal.addClass («посетил»);
});
Таким образом, браузер должен сканировать документ только один раз, а не трижды. Несмотря на то, что прирост производительности в этом случае может быть минимальным, при использовании большого количества селекторов улучшение будет значительным.
Кстати, производительность селектора : visible
также была улучшена за счет использования кеширования.
Сводка
В этом руководстве описаны почти все селекторы jQuery, которые вы можете использовать в проекте.Я также попытался указать на тонкие различия, которые следует учитывать при использовании этих селекторов. Если у вас есть вопросы по этой статье, дайте мне знать в комментариях!
S. No. | Селектор | Описание |
---|---|---|
1) | Имя тега: | Он представляет имя тега, доступное в DOM. Например: $ ('p') выделяет все абзацы'p' в документе. |
2) | ID тега: | Он представляет тег, доступный с определенным идентификатором в DOM. Например: $ ('# real-id') выбирает в документе определенный элемент, имеющий идентификатор real-id. |
3) | Класс тега: | Он представляет тег, доступный с определенным классом в DOM. Например: $ ('real-class') выбирает все элементы в документе, которые имеют класс real-class. |
S. No. | Селектор | Описание |
1) | Имя: | Он выбирает все элементы, которые соответствуют заданному имени элемента. |
2) | #ID: | Он выбирает один элемент, соответствующий заданному идентификатору. |
3) | .Класс: | Он выбирает все элементы, соответствующие данному классу. |
4) | Универсальный (*) | Выбирает все элементы, доступные в DOM. |
5) | Несколько элементов A, B, C | Он выбирает объединенные результаты всех указанных селекторов A, B и C. |
Селектор | Пример | Описание |
* | $ ("*") | Используется для выбора всех элементов. |
#id | $ ("# firstname") | Будет выбран элемент с |
.class | $ (". Primary") | Он выберет все элементы с |
class, .class | $ (". primary, .secondary") | Он выберет все элементы с классом "primary" или "secondary" |
element | $ ("p") | Будет выберите все элементы p. |
el1, el2, el3 | $ ("h2, div, p") | Он выберет все элементы h2, div и p. |
: первый | $ ("p: first") | Будет выбран первый элемент p |
: последний | $ ("p: last") | Будет выбран последний элемент p |
: четный | $ ("tr: четный") | Это выберет все четные элементы tr |
: нечетные | $ ("tr: odd") | Это выберет все нечетные элементы tr |
: first-child | $ ("p: first-child") | Он выберет все элементы p, которые являются первыми дочерними элементами своего родителя |
: first-of-type | $ ( "p: first-of-type") | Он выберет все элементы p, которые являются первым элементом p своего родителя |
: last-child | $ ("p: last-child") | It выберет все элементы p, которые являются последними дочерними элементами их родителя. |
: last-of-type | $ ("p: last-of-type") | Будет выберите все элементы p, которые являются последним элементом p своего родителя |
: nth-child (n) | $ ("p: nth-child (2)") | Это выберет все элементы p, которые являются 2-й дочерний элемент их родителя |
: nth-last-child (n) | $ ("p: nth-last-child (2)") | При этом будут выбраны все элементы p, которые являются вторыми дочерними элементами их родительский, считая от последнего дочернего элемента |
: nth-of-type (n) | $ ("p: nth-of-type (2)") | Он выберет все элементы p, которые являются вторыми p элемент их родительского элемента |
: nth-last-of-type (n) | $ ("p: nth-last-of-type (2)") | Это выберет все элементы p, которые являются вторыми p родительского элемента, считая от последнего дочернего элемента |
: only-child | $ ("p: only-child") | Он выберет все элементы p, которые являются единственными дочерними элементами их родительского элемента |
: только тип | $ ("p: only-of-type") | Он выберет все элементы p, которые являются единственными дочерними элементами своего типа своего родителя. |
parent> child | $ ("div> p") | Он выберет все элементы p, которые являются прямым потомком элемента div |
родительский потомок | $ ("div p") | Он выберет все элементы p, которые являются потомками элемента div |
element + next | $ ("div + p") | Он выбирает элемент p, который находится рядом с каждым элементом div |
element ~ siblings | $ ("div ~ p") | Он выбирает все p элементов, которые являются родственниками элемента div |
: eq (index) | $ ("ul li: eq (3)") | Будет выбран четвертый элемент в списке (индекс начинается с 0) |
: gt (no) | $ ("ul li: gt (3)") | Выберите элементы списка с индексом больше 3 | : lt (no) | $ ("ul li: lt (3)") | Выберите элементы списка с индексом меньше 3 |
: not (селектор) | $ ("input: not (: empty) ") | Выбрать все непустые элементы ввода |
: header | $ (": header ") | Выбрать все элементы заголовка h2, h3... |
: анимированный | $ (": animated") | Выбрать все анимированные элементы |
: focus | $ (": focus") | Выберите элемент, который в данный момент находится в фокусе |
: содержит (текст) | $ (": содержит ('Hello')") | Выбрать все элементы, содержащие текст "Привет" |
: has (селектор) | $ ("div: has ( p) ") | Выбрать все элементы div с элементом ap |
: пусто | $ (": пусто ") | Выбрать все пустые элементы |
: родительский | $ (": родительский ") | Выбрать все элементы, которые являются родительскими для другого элемента |
: скрытый | $ (" p: hidden ") | Выбрать все скрытые элементы p |
: видимый | $ (" table: visible ") | Выбрать все видимые таблицы |
: root | $ (": root ") | Будет выбран корневой элемент документа |
: lang (language) | $ (" p: lang (de) ") | Выбрать все элементы p со значением атрибута lang, начинающимся с" de " |
[атрибут] | $ ("[href]") | Выбрать все элементы с атрибутом href |
[атрибут = значение] | $ ("[href = 'default. = 'Tom']") | Выбрать все элементы со значением атрибута заголовка, начинающимся с "Томом" |
[атрибут ~ = значение] | $ ("[title ~ = 'hello']") | Выбрать все элементы со значением атрибута title, содержащим конкретное слово "hello" 90 545 |
[атрибут * = значение] | $ ("[title * = 'hello']") | Выберите все элементы со значением атрибута title, содержащим слово «hello» |
: input | $ (": input") | Он выберет все элементы ввода |
: text | $ (": text") | Он выберет все элементы ввода с type = "text" |
: password | $ (": пароль") | Он выберет все элементы ввода с типом = "пароль" |
: радио | $ (": радио") | Он выберет все элементы ввода с типом = "радио " |
: checkbox | $ (": checkbox ") | Он выберет все элементы ввода с type =" checkbox " |
: submit | $ (": submit ") | Будет выбрано все элементы ввода с type = "submit" |
: reset | $ (": reset") | Будет выбран Все элементы ввода с type = "reset" |
: button | $ (": button") | Он выберет все элементы ввода с type = "button" |
: image | $ (": image ") | Он выберет все элементы ввода с type =" image " |
: file | $ (": file ") | Он выберет все элементы ввода с type =" file " |
: enabled | $ (": enabled") | Выбрать все включенные элементы ввода |
: disabled | $ (": disabled") | Будет выбрано все отключенные элементы ввода |
: выбрано | $ (": selected") | Он выберет все выбранные элементы ввода |
: checked | $ (": checked") | Он выберет все отмеченные элементы ввода |
Шпаргалка Xpath
Тестирование
Стенд Xpath
Тестовые запросы на стенде Xpath:
Консоль браузера
$ x ("// div")
Работает в Firefox и Chrome.
Селекторы
Селекторы потомков
CSS | Xpath | ? |
---|---|---|
h2 |
// h2 |
? |
div p |
// div // p |
? |
ul> li |
// ул / ли |
? |
ul> li> a |
// ул / ли / а |
|
дел> * |
// div / * |
|
: корень |
/ |
? |
: корень> тело |
/ корпус |
Селекторы атрибутов
CSS | Xpath | ? |
---|---|---|
#id |
// * [@ id = "id"] |
? |
. = '/'] |
// a [начинается с (@href, '/')] |
? |
a [href $ = 'pdf'] |
// a [заканчивается на (@href, '.pdf ')] |
|
a [href * = ': //'] |
// a [содержит (@href, ': //')] |
|
a [rel ~ = 'help'] |
// a [contains (@rel, 'help')] … вроде |
Селектор заказов
CSS | Xpath | ? |
---|---|---|
ul> li: первый в своем роде |
// ul / li [1] |
? |
ul> li: nth-of-type (2) |
// ul / li [2] |
|
ul> li: последний тип |
// ul / li [last ()] |
|
li # id: first-of-type |
// li [1] [@ id = "id"] |
? |
a: первенец |
// * [1] [name () = "a"] |
|
a: последний ребенок |
// * [last ()] [name () = "a"] |
Братья и сестры
CSS | Xpath | ? |
---|---|---|
h2 ~ ul |
// h2 / следующий-брат :: ул |
? |
h2 + ul |
// h2 / следующий-брат :: ul [1] |
|
h2 ~ # id |
// h2 / следующий-брат :: [@ id = "id"] |
jQuery
CSS | Xpath | ? |
---|---|---|
$ ('ul> li').родитель () |
// ул / ли / .. |
? |
$ ('li'). Ближайший ('раздел') |
// li / ancestor-or-self :: section |
|
$ ('a'). Attr ('href') |
// а / @ href |
? |
$ ('span'). Text () |
// диапазон / текст () |
Другое
CSS | Xpath | ? |
---|---|---|
h2: not ([id]) |
// h2 [not (@id)] |
? |
Соответствие текста | // кнопка [text () = "Отправить"] |
? |
Соответствие текста (подстрока) | // кнопка [содержит (text (), "Go")] |
|
Арифметика | // товар [@price> 2.50] |
|
Имеет детей | // ul [*] |
|
Имеет детей (удельных) | // ul [li] |
|
Или логика | // a [@name или @href] |
? |
Union (присоединяется к результатам) | // а | // div |
? |
Проверка класса
// div [содержит (concat ('', normalize-space (@class), ''), 'foobar')]
Xpath не имеет оператора «проверить, является ли часть списка, разделенного пробелами», поэтому это обходной путь (источник).
Выражения
Ступени и топоры
// |
ул. |
/ |
a [@ id = 'link'] |
Ось | Шаг | Ось | Шаг |
Префиксы
Начните свое выражение с любого из них.
Оси
Разделите свои шаги с помощью /
. Используйте два ( //
), если вы не хотите выбирать прямых потомков.
Ступеньки
// div
// div [@ name = 'box']
// [@ id = 'ссылка']
Шаг может иметь имя элемента ( div
) и предикаты ( [...]
). Оба варианта не обязательны.
Они также могут быть такими:
// a / text () # => «Иди домой»
// a / @ href # => "index.html"
// a / * # => Все дочерние элементы a
Предикаты
Предикаты
// div [true ()]
// div [@ class = "head"]
// div [@ class = "head"] [@ id = "top"]
Ограничивает набор узлов, только если выполняется какое-то условие.Их можно сковать.
Операторы
# Сравнение
// a [@id = "xyz"]
// a [@id! = "xyz"]
// a [@price> 25]
# Логика (и / или)
// div [@ id = "head" и position () = 2]
// div [(x и y) или нет (z)]
Используйте операторы сравнения и логические операторы для создания условных выражений.
Использование узлов
# Используйте их внутри функций
// ul [count (li)> 2]
// ul [count (li [@ class = 'hide'])> 0]
# Это возвращает ``, у которого есть дочерний элемент `- `
// ul [li]
Вы можете использовать узлы внутри предикатов.
Индексирование
// a [1] # первый
// a [last ()] # последний
// ol / li [2] # секунда
// ol / li [position () = 2] # то же, что и выше
// ol / li [position ()> 1] #: not (: first-of-type)
Используйте []
с числом или last ()
или позицию ()
.
Порядок подключения
a [1] [@ href = '/']
а [@href = '/'] [1]
Порядок значительный, эти два разные.
Вложенные предикаты
//section[.//h2[@id='hi ']]
Возвращает
с id = 'hi'
.
Функции
Функции узла
name () # // [начинается с (name (), 'h')]
text () # // кнопка [text () = "Отправить"]
# // кнопка / текст ()
lang (str)
пространство имен-uri ()
count () # // таблица [count (tr) = 1]
position () # // ol / li [position () = 2]
Логические функции
not (expr) # button [not (начинается с (text (), "Submit"))]
Строковые функции
contains () # font [contains (@class, "head")]
начинается с () # шрифт [начинается с (@class, "head")]
заканчивается на () # шрифт [заканчивается на (@class, "head")]
concat (x, y)
подстрока (str, start, len)
substring-before ("01/02", "/") # => 01
substring-after ("01/02", "/") # => 02
переведите()
нормализовать-пробел ()
длина строки ()
Преобразование типа
строка ()
номер()
логическое значение ()
Топоры
Использование осей
// ul / li # ul> li
// ul / child :: li # ul> li (то же самое)
// ul / следующий-брат :: li # ul ~ li
// ul / потомок или сам :: li # ul li
// ul / предок-или-сам :: li # $ ('ul').ближайший ('ли')
Шаги выражения разделены /
, обычно используются для выбора дочерних узлов. Это не всегда верно: вы можете указать другую «ось» с помощью ::
.
// |
ул. |
/ ребенок :: |
ли |
Ось | Шаг | Ось | Шаг |
Дочерняя ось
# оба одинаковые
// ul / li / a
// ребенок :: ul / child :: li / child :: a
child ::
- ось по умолчанию.Это делает работу // a / b / c
.
# оба одинаковые
# это работает, потому что `child :: li` истинно, поэтому предикат выполняется успешно
// ul [li]
// ul [child :: li]
# оба одинаковые
// ul [count (li)> 2]
// ul [count (child :: li)> 2]
Самостоятельная ось
# оба одинаковые
// div // h5
// div / потомок или сам :: h5
//
- это сокращение от оси -потомок ::
.
# оба одинаковые
// ul // [last ()]
// ul / потомок или сам :: [last ()]
Оси прочие
Вы можете использовать и другие топоры.
Профсоюзы
// а | //охватывать
Использование |
для соединения двух выражений.
Другие примеры
Примеры
// * # все элементы
count (// *) # подсчитываем все элементы
(// h2) [1] / text () # текст первого заголовка h2
// li [span] # находим с внутри
# ... заменяется на // li [child :: span]
// ul / li / .. # использовать .. для выбора родителя
Найди родителей
// раздел [h2 [@ id = 'section-name']]
Находит
h2 # section-name
// раздел [// h2 [@ id = 'section-name']]
Находит
h2 # section-name
.(То же, что и выше, но вместо потомка используется потомок или я)
Ближайшие
./ancestor-or-self::[@class="box "]
Работает аналогично jQuery $ (). Closest ('. Box')
.
Атрибуты
// товар [@price> 2 * @ Discount]
Находит
и проверяет его атрибуты
Список литературы
align-content | align-content 속성 은 콘텐츠 의 상하 관계 정렬 상태 를 정의 합니다. |
выровнять элементы | align-items 속성 은 콘텐츠 내부 의 정렬 상태 를 정의 합니다. |
самоцентрирование | align-self 속성 은 콘텐츠 의 정렬 상태 를 정의 합니다. |
все | все 속성 은 요소 의 속성 을 초기화 또는 상속 을 설정 합니다. |
анимация | анимация 속성 은 애니메이션 을 정의 합니다. |
задержка анимации | animation-delay 속성 은 요소 가 로드 된 후 애니메이션 이 시작될 때 까지 의 시간 을 나타 냅니다. |
анимация-направление | анимация-направление 속성 은 애니메이션 움직임 방향 을 설정 합니다. |
продолжительность анимации | продолжительность анимации 속성 은 애니메이션 움직임 시간 을 설정 합니다. |
режим заливки анимации | animation-fill-mode 속성 은 애니메이션 이 끝난 후의 상태 를 설정 합니다. |
количество итераций анимации | число итераций анимации 속성 은 애니메이션 반복 횟수 설정 합니다. |
имя-анимации | имя-анимации 속성 은 애니메이션 ключевой кадр 이름 을 설정 합니다. |
состояние воспроизведения анимации | animation-play-state 속성 은 애니메이션 진행 상태 를 설정 합니다. |
функция синхронизации анимации | анимация-функция синхронизации 속성 은 움직임 의 속도 를 정의 합니다. |
задняя поверхность-видимость | backface-visibility 속성 은 요소 의 뒷면 을 정의 합니다. |
фон | фон 속성 은 배경 속성 값 을 정의 합니다. |
фоновая насадка | фоновое приложение 속성 은 배경 이미지 의 고정 여부 를 입니다. |
фоновый режим наложения | background-blend-mode 속성 은 배경 이미지 의 고정 속성 입니다. |
фон-клипса | фоновый клип 속성 은 배경 이미지 의 고정 여부 를 설정 속성 입니다. |
цвет фона | background-color 속성 은 백 그라운 색 을 설정 합니다. |
фоновое изображение | background-image 속성 은 백 그라운 색 을 설정 합니다. |
фон-происхождение | background-origin 속성 은 백 그라운 색 을 설정 합니다. |
фон-позиция | background-position 속성 은 백 그라운 이미지 의 위치 영역 을 설정 합니다. |
фоновый повтор | фон-повтор 속성 은 백 그라운 이미지 반복 여부 를 설정 합니다. |
размер фона | размер фона 속성 은 백그라운드 이미지 사이즈 를 설정 합니다. |
бордюр | бордюр 속성 은 테두리 속성 을 설정 합니다. |
граница нижняя | нижняя граница 속성 은 테두리 아래쪽 테두리 속성 을 설정 합니다. |
цвет нижней границы | border-bottom-color 속성 은 테두리 아래쪽 색 속성 을 설정 합니다. |
граница-нижний-левый-радиус | border-bottom-left-radius 속성 은 아래 부분 왼쪽 모서리 굴곡 을 설정 합니다. |
граница-нижний-правый-радиус | граница-нижний-правый-радиус 속성 은 아래 부분 오른쪽 모서리 굴곡 을 설정 합니다. |
с окантовкой снизу | border-bottom-style 속성 은 아래쪽 테두리 스타일 속성 을 설정 합니다. |
ширина по краю снизу | border-bottom-width 속성 은 아래쪽 테두리 두께 속성 을 설정 합니다. |
граница-развал | border-collapse 속성 은 테이블 의 테두리 분리 여부 를 정의 합니다. |
цвет рамки | border-color 속성 은 테두리 색 속성 을 설정 합니다. |
граница изображения | border-image 속성 은 테두리 이미지 속성 을 설정 합니다. |
border-image-outset | border-image-outset 속성 은 테두리 이미지 간격 속성 을 설정 합니다. |
повтор изображения границы | border-image-repeat 속성 은 테두리 이미지 반복 속성 을 설정 합니다. |
фрагмент изображения границы | фрагмент изображения границы 속성 은 테두리 이미지 크기 속성 을 설정 합니다. |
border-image-source | border-image-source 속성 은 테두리 이미지 경로 속성 을 설정 합니다. |
ширина изображения границы | ширина-изображения-границы 속성 은 테두리 이미지 두께 속성 을 설정 합니다. |
граница левая | border-left 속성 은 왼쪽 테두리 속성 을 설정 합니다. |
левая рамка | border-left-color 속성 은 왼쪽 테두리 색 속성 을 설정 합니다. |
рамка-левая | border-left-style 속성 은 왼쪽 테두리 스타일 속성 을 설정 합니다. |
ширина рамки слева | border-left-width 속성 은 왼쪽 테두리 두께 속성 을 설정 합니다. |
граница-радиус | border-radius 속성 은 모서리 굴곡 을 설정 합니다. |
кайма правая | граница справа 속성 은 오른쪽 테두리 속성 을 설정 합니다. |
окантовка правая | border-right-color 속성 은 오른쪽 테두리 색 속성 을 설정 합니다. |
рамка-правая | border-right-style 속성 은 오른쪽 테두리 스타일 속성 을 설정 합니다. |
ширина рамки справа | border-right-width 속성 은 오른쪽 테두리 두께 속성 을 설정 합니다. |
расстояние между границами | border-spacing 속성 은 테이블 의 테두리 간격 을 설정 합니다. |
бордюрный | стиль границы 속성 은 테두리 스타일 속성 을 설정 합니다. |
кайма | border-top 속성 은 위쪽 테두리 속성 을 설정 합니다. |
цвет верхней границы | border-top-color 속성 은 위쪽 테두리 색 속성 을 설정 합니다. |
граница-верхний-левый-радиус | border-top-left-radius 속성 은 윗부분 왼쪽 모서리 굴곡 을 설정 합니다. |
граница-верхний-правый-радиус | border-top-right-radius 속성 은 윗부분 오른쪽 모서리 굴곡 을 설정 합니다. |
с бордюром | border-top-style 속성 은 위쪽 테두리 스타일 속성 을 설정 합니다. |
бордюр по ширине по верху | border-top-width 속성 은 위쪽 테두리 두께 속성 을 설정 합니다. |
ширина рамки | border-width 속성 은 테두리 두께 속성 을 설정 합니다. |
низ | дно 속성 은 위치 요소 의 아래쪽 속성 을 설정 합니다. |
коробка-украшение-разрыв | box-decoration-break 속성 은 컬럼 및 줄 바꿈 시 테두리 와 패딩 의 방식 을 설정 합니다. |
коробка-тень | box-shadow 속성 은 박스 요소 의 그림자 를 설정 합니다. |
размер коробки | размер коробки 속성 은 크기 및 높이 여부 의 포함 을 설정 합니다. |
сторона подписи | caption-side 속성 은 caption 의 위치 를 설정 합니다. |
каре | caret-color 속성 은 input 의 커서 색 을 정의 합니다. |
прозрачный | очистить 속성 은 поплавок 요소 의 성질 을 차단 합니다. |
зажим | зажим 속성 은 절대 요소 의 위치 값 을 지정 합니다. |
цвет | цвет 속성 은 글씨 색 을 설정 합니다. |
количество столбцов | количество столбцов 속성 은 컬럼 의 수 를 정의 합니다. |
колонка-заполнитель | заполнение столбца 속성 은 열의 지정 방법 을 정의 합니다. |
колонна-зазор | колонка-пробел 속성 은 열의 간격 을 정의 합니다. |
линейка-столбец | правило столбца 속성 은 컬럼 라인 의 가로 값, 스타일, 컬러 를 정의 합니다. |
столбец-линейка-цвет | цвет правила столбца 은 컬럼 의 라인 색 을 정의 합니다. |
столбец-линейка | column-rule-style 속성 은 컬럼 라인 의 스타일 을 정의 합니다. |
ширина столбца-линейки | column-rule-width 속성 은 컬럼 라인 의 가로 값 을 정의 합니다. |
колонна-пролет | колонна-пролет 속성 은 열의 속성 을 정의 합니다. |
ширина столбца | ширина столбца 속성 은 컬럼 의 가로 값 을 정의 합니다. |
столбцы | столбца 속성 은 열의 폭 과 열의 수 를 정의 합니다. |
содержание | содержание 속성 은 콘텐츠 내용 을 설정 합니다. |
счетчик | счетчик инкремента 속성 은 콘텐츠 의 순서 상태 를 정의 합니다. |
сброс счетчика | сброс счетчика 속성 은 콘텐츠 의 숫자 를 초기화 합니다. |
курсор | курсор 속성 은 마우스 오버 시 마우스 포인터 를 정의 합니다. |
направление | направление 속성 은 문장 의 방향 을 설정 합니다. |
дисплей | дисплей 속성 은 요소 의 성질 을 정의 합니다. |
пустые ячейки | пустых ячеек 속성 은 테이블 의 빈 요소 의 속성 을 설정 합니다. |
фильтр | фильтр 속성 은 이미지 의 비쥬얼 효과 를 정의 합니다. |
гибкий | flex 속성 은 콘텐츠 의 성질 을 flex 로 정의 합니다. |
гибкая основа | гибкая основа 속성 은 요소 의 기본 단위 를 정의 합니다. |
гибкое направление | flex-direction 속성 은 요소 의 정렬 방향 을 정의 합니다. |
гибкий поток | flex-flow 속성 은 요소 의 정렬 방향 과 줄 속성 을 설정 합니다. |
гибкий рост | flex-grow 속성 은 요소 의 크기 를 숫자 를 통해 정의 합니다. |
гибкая термоусадочная | flex-shrink 속성 은 요소 의 크기 를 숫자 를 통해 줄여 줍니다. |
гибкая пленка | flex-wrap 속성 은 요소 의 줄 속성 을 설정 합니다. |
поплавок | поплавок 속성 은 블록 요소 의 정렬 상태 를 설정 합니다. |
шрифт | шрифт 속성 은 폰트 에 관한 설정 을 정의 합니다. |
семейство шрифтов | 속성 은 폰트 종류 를 설정 합니다. |
размер шрифта | font-size 속성 은 폰트 사이즈 속성 을 설정 합니다. |
размер шрифта настроить | font-size-adjust 속성 은 소문자 를 기준 으로 폰트 크기 를 설정 합니다. |
font-stretch | font-stretch 속성 은 폰트 의 굵기 를 정의 합니다. |
стиль шрифта | font-style 속성 은 폰트 의 스타일 을 정의 합니다. |
вариант шрифта | font-variant 속성 은 글꼴 의 변형 을 정의 합니다. |
font-weight | font-weight 속성 은 폰트 의 두께 를 정의 합니다. |
сетка | сетка 속성 은 그리드 레이아웃 을 정의 합니다. |
область сетки | сетка |
сетка-автоколонны | сетка-автоколонны |
сетка-автомат | сетка-автопоток |
сетка автоматических рядов | сетка-автоматические ряды |
сетка-столбик | сетка-столбик |
решетка-конец колонны | сетка-столбец-конец |
сетка-столбец-зазор | сетка-столбец-зазор |
сетка-столбец-начало | сетка-столбец-начало |
сетка-зазор | сетка-га |
сетка рядная | сетка-рядная |
конец ряда сетки | grid-row-ru |
сетка-рядка-зазор | сетка-междурядье |
сетка-ряд-начало | сетка-ряд-начало |
сетка-шаблон | сетка-шаблон |
сетка-шаблон-области | сетка-шаблон-области |
сетка-шаблон-столбцы | сетка-шаблон-столбцы |
сетка-шаблон-строки | сетка-шаблон-строки |
Знаки пунктуации | знак препинания 속성 은 글씨 의 시작 및 끝 의 위치 정의 합니다. |
высота | высота 속성 은 콘텐츠 요소 의 세로 값 을 설정 합니다. |
дефис | дефиса 속성 은 텍스트 의 하이픈 영역 을 설정 합니다. |
изоляция | изоляция 속성 은 контекст стекирования 을 설정 합니다. |
justify-content | justify-content 속성 은 콘텐츠 의 좌우 관계 정렬 상태 를 정의 합니다. |
левый | осталось 속성 은 위치 요소 의 왼쪽 속성 을 설정 합니다. |
межбуквенный интервал | межбуквенный интервал 속성 은 글자 사이 의 간격 을 설정 합니다. |
высота строки | line-height 속성 은 문장 과 문장 사이 의 간격 을 설정 합니다. |
в виде списка | в стиле списка 속성 은 목록 스타일 속성 을 설정 합니다. |
изображение в стиле списка | изображение в стиле списка 속성 은 목록 마커 의 이미지 를 설정 합니다. |
позиция стиля списка | list-style-position 속성 은 목록 마커 의 위치 속성 을 설정 합니다. |
стиль списка | list-style-type 속성 은 목록 마커 의 유형 을 설정 합니다. |
маржа | маржа 속성 은 요소 의 바 같쪽 여백 을 설정 합니다. |
нижнее поле | margin-bottom 속성 은 요소 의 아래 바 같쪽 여백 을 설정 합니다. |
поле слева | margin-left 속성 은 요소 의 왼쪽 바 같쪽 여백 을 설정 합니다. |
поле справа | margin-right 속성 은 요소 의 오른쪽 바 같쪽 여백 을 설정 합니다. |
верхнее поле | margin-top 속성 은 요소 의 위 부분 바 같쪽 여백 을 설정 합니다. |
макс. Высота | max-height 속성 은 요소 의 최대 세로 값 을 설정 합니다. |
макс. Ширина | max-width 속성 은 요소 의 최대 가로 값 을 설정 합니다. |
мин-высота | 속성 은 요소 의 최소 세로 값 을 설정 합니다. |
мин. Ширина | 속성 은 요소 의 최소 가로 값 을 설정 합니다. |
смешанный режим | смешанный режим смешивания 속성 은 배경 의 혼합 상태 를 정의 합니다. |
пригонка объекта | соответствует объекту 속성 은 , |
объект-позиция | объект-позиция 속성 은 , |
непрозрачность | непрозрачность 속성 은 요소 의 투명도 를 설정 합니다. |
заказать | заказ 속성 은 flex 콘텐츠 의 순서 를 정의 합니다. |
контур | наброски 속성 은 아웃 라인 의 색, 스타일, 두께 를 정의 합니다. |
цвет контура | контур-цвет 속성 은 아웃 라인 의 색 을 정의 합니다. |
контур-офсет | смещение контура 속성 은 아웃 라인 의 간격 을 정의 합니다. |
контурный стиль | стиль контура 속성 은 아웃 라인 스타일 을 정의 합니다. |
ширина контура | outline-width 속성 은 아웃 라인 의 두께 를 정의 합니다. |
перелив | переполнение 속성 은 지정한 영역 에 요소 들이 벗어 났을 때 속성 을 설정 합니다. |
переполнение-x | overflow-x 속성 은 X 축을 기준 으로 지정한 영역 에 요소 들이 벗어 났을 때 속성 설정 합니다. |
переполнение | overflow-y 속성 은 Y 축을 기준 으로 지정한 영역 에 벗어 났을 설정 합니다. |
набивка | набивка 속성 은 요소 의 안쪽 여백 을 설정 합니다. |
набивка нижняя | нижняя обивка 속성 은 요소 의 아래쪽 여백 을 설정 합니다. |
обивка левая | padding-left 속성 은 요소 의 왼쪽 여백 을 설정 합니다. |
обивка правая | padding-right 속성 은 요소 의 오른쪽 여백 을 설정 합니다. |
утеплитель | верхняя обивка 속성 은 요소 의 위쪽 여백 을 설정 합니다. |
разрыв страницы после | разрыв страницы после 속성 은 페이지 인쇄 시 분리 에 관한 설정 정의 합니다. |
разрыв страницы до | page-break-before 속성 은 인쇄 시 페이지 분리 에 관한 설정 을 정의 합니다. |
разрыв страницы внутри | page-break-inside 속성 은 인쇄 시 페이지 분리 에 관한 합니다. |
перспектива | перспектива 속성 은 3D 를 표현할 때 원근 점 을 정의 합니다. |
перспективное происхождение | перспектива-начало координат 속성 은 3D 를 표현할 때 원근 점 의 방향 정의 합니다. |
события указателя | события указателя 속성 은 포인터 이벤트 반응 을 정의 합니다. |
позиция | позиция 속성 은 요소 의 위치 를 설정 합니다. |
котировки | цитаты 속성 은 인용 부호 를 정의 합니다. |
изменить размер | изменить размер 속성 은 요소 의 사이즈 를 정의 합니다. |
правый | справа 속성 은 위치 요소 의 오른쪽 속성 을 설정 합니다. |
размер табулятора | размер табуляции 속성 은 글씨 의 간격 을 정의 합니다. |
стол-расклад | стол-макет 속성 은 표의 레이아웃 크기 를 정의 합니다. |
выравнивание текста | выравнивание текста 속성 은 텍스트 정렬 방식 을 설정 합니다. |
text-align-last | text-align-last 속성 은 문장 의 마지막 텍스트 정렬 방식 을 설정 합니다. |
текстовое оформление | оформление текста 속성 은 글자 라인 속성 을 설정 합니다. |
текст-украшение-цвет | цвет-украшение-текста 속성 은 글자 라인 색 을 설정 합니다. |
текст-украшение-строка | текст-украшение-строка 속성 은 글자 라인 스타일 을 설정 합니다. |
стиль оформления текста | стиль оформления текста 속성 은 글자 스타일 을 정의 합니다. |
текст-отступ | text-indent 속성 은 문단 들여 쓰기 속성 을 설정 합니다. |
выравнивание текста по ширине | выравнивание текста по ширине 속성 은 텍스트 의 간격 을 정의 합니다. |
переполнение текста | переполнение текста 속성 은 문자열 영역 속성 을 설정 합니다. |
текстовая тень | text-shadow 속성 은 텍스트 에 그림자 를 설정 합니다. |
преобразование текста | преобразование текста 속성 은 텍스트 를 대문자 나 소문자 로 변경 합니다. |
верх | верх 속성 은 위치 요소 의 위쪽 속성 을 설정 합니다. |
преобразование | преобразовать 속성 은 요소 의 움직임 을 표현 합니다. |
преобразование происхождения | transform-origin 속성 은 요소 의 움직임 방향 을 정의 합니다. |
стиль трансформ | transform 은 요소 의 움직임 스타일 을 정의 합니다. |
переход | переход 속성 은 요소 의 움직임 을 정의 합니다. |
задержка перехода | задержка перехода 속성 은 요소 의 움직임 시간 을 지연 합니다. |
продолжительность перехода | продолжительность перехода 속성 은 요소 의 움직임 지속 시간 을 정의 합니다. |
переходная собственность | свойство перехода 속성 은 переход 의 적용 여부 를 정의 합니다. |
переходная функция синхронизации | transition-time-function 속성 은 요소 의 움직임 기능 을 정의 합니다. |
юникод-биди | unicode-bidi 속성 은 글자 의 방향 속성 을 설정 합니다. |
по выбору пользователя | пользовательский выбор 속성 은 요소 의 텍스트 를 선택할 지 정의 합니다. |
с выравниванием по вертикали | с выравниванием по вертикали 속성 은 텍스트 의 상하 정렬 방식 을 설정 합니다. |
видимость | видимость 속성 은 요소 를 보이지 않게 정의 합니다. |
белое пространство | пробел 속성 은 줄 바꿈, 공백, 줄 속성 을 설정 합니다. |
ширина | ширина 속성 은 요소 의 가로 값 을 정의 합니다. |
разрыв слова | разрыв слова 속성 은 줄 바꿈 속성 을 설정 합니다. |
межсловный интервал | межсловный интервал 속성 은 단어 사이 의 간격 을 정의 합니다. |
перенос слов | перенос слов 속성 은 줄 바꿈 을 설정 합니다. |
z-индекс | z-index 속성 은 요소 의 위치 가 겹칠 경우 순서 를 정의 합니다. |
Selector | Пример | Выбирает |
---|---|---|
* | $ ("*") | Все элементы |
Элемент с | ||
. класс | $ (". Intro") | Все элементы с |
. класс, . класс | $ (". Intro, .demo") | Все элементы с классом "intro" или "demo" |
элемент | $ ("p") | Все
элементы |
el1 , el2 , el3 | $ ("h2, div, p") | Все элементы
, и
|
: первый | $ ("p: first") | Первый элемент |
: последний | $ ("p: last") | Последний элемент |
: четный | $ ("tr: even") | Все четные элементы |
: нечетные | $ ("tr: odd") | Все нечетные элементы |
: first-child | $ ("p: first-child") | Все элементы
, которые являются первыми дочерними элементами своего родителя 905 45 |
: first-of-type | $ ("p: first-of-type") | Все элементы
, которые являются первым элементом своего родителя |
: last-child | $ ("p: last-child") | Все элементы
, которые являются последними дочерними элементами своего родителя |
: last-of-type | $ ("p: last-of-type" ) | Все элементы
, которые являются последним элементом своих родительских |
: nth-child ( n ) | $ ("p: nth-child (2)") | Все
элементы, которые являются вторыми дочерними элементами своего родителя |
: nth-last-child ( n ) | $ ("p: nth-last-child (2)") | Все
элементы, которые являются вторыми дочерними элементами своего родителя, считая от последнего дочернего элемента |
: nth-of-type ( n ) | $ ("p: nth-of-type (2)") | Все
элементы, которые являются вторым элементом их родительского элемента |
: nth-last-of -type ( n ) | $ ("p: nth-last-of-type (2)") | Все элементы
, которые являются вторым элементом своего родителя, считая от последнего дочернего элемента |
: only-child | $ ("p: only-child") | Все элементы
, которые являются единственными дочерними элементами своего родителя |
: only-of-type | $ (" p: only-of-type ") | Все элементы
, которые являются единственными дочерними для своего типа своего родителя |
parent> child | $ (" div > p ") | Все элементы
, которые являются прямым потомком элемента |
родительский потомок | $ (" div p ") | Все элементы
, являющиеся потомками < div> element |
element + next | $ ("div + p") | Элемент
, который находится рядом с каждым элементом |
element ~ siblings | $ ( "div ~ p") | Все элементы
, являющиеся родственниками элемента |
: eq ( index ) | $ ("ul li: eq (3) ") | Четвертый элемент в списке (индекс начинается с 0) |
: gt ( no ) | $ (" ul li: gt (3) ") | Элементы списка с индекс больше 3 |
: lt ( no ) | $ ("ul li: lt (3)") | Элементы списка с индексом меньше 3 |
: нет ( селектор ) | $ ("input: not (: empty)") | Все непустые входные элементы |
: header | $ (": header") | Все заголовки элементы
,... |
: анимированный | $ (": animated") | Все анимированные элементы |
: focus | $ (": focus") | Элемент, который в данный момент находится в фокусе |
: содержит ( текст ) | $ (": contains ('Hello')") | Все элементы, содержащие текст "Hello" |
: has ( selector ) | $ ("div: has (p) ") | Все элементы
, у которых есть элемент
|
: пусто | $ (": empty ") | Все пустые элементы |
: родительский | $ (": parent") | Все элементы, которые являются родительскими для другого элемента |
: hidden | $ ("p: hidden") | Все скрытые элементы |
: visible | $ ("table: visible") | Все видимые таблицы |
: root | $ (": root") | Th Корневой элемент документа |
: lang ( language ) | $ ("p: lang (de)") | Все элементы
, значение атрибута lang которых начинается с de |
[ атрибут ] | $ ("[href]") | Все элементы с атрибутом href |
[ атрибут = значение ] | $ ("[href = 'по умолчанию. = 'hello']") | Все элементы со значением атрибута name, начинающимся с "hello" |
[ атрибут ~ = значение ] | $ ("[name ~ = 'hello']") | Все элементы со значением атрибута name содержат ng слово «привет» |
[атрибут * = значение ] | $ («[name * = 'hello']») | Все элементы со значением атрибута name, содержащим строку «hello» |
: вход | $ (": вход") | Все элементы ввода |
: текст | $ (": текст") | Все элементы ввода с типом = "текст" |
: пароль | $ (": пароль") | Все элементы ввода с типом = "пароль" |
: радио | $ (": радио") | Все элементы ввода with type = "radio" |
: checkbox | $ (": checkbox") | Все элементы ввода с type = "checkbox" |
: submit | $ (": submit") | Все элементы ввода с type = "submit" |
: reset | $ (": reset") | Все элементы ввода с type = "reset" |
: button | $ (": button") | Все элементы ввода с type = "button" |
: image | $ (": image") | Все элементы ввода с типом = "изображение" |
: файл | $ (": файл") | Все элементы ввода с типом = "файл" |
: включено | $ (": включено" ) | Все активные элементы ввода |
: отключены | $ (": disabled") | Все отключенные элементы ввода |
: выбраны | $ (": selected") | Все выбранные элементы ввода |
: проверено | $ (": проверено") | Все проверенные элементы ввода |
.