52 lines
No EOL
2.3 KiB
Markdown
52 lines
No EOL
2.3 KiB
Markdown
# CSS Селекторы — Полная шпаргалка
|
||
|
||
## Быстрый справочник
|
||
|
||
### Базовые селекторы
|
||
|
||
| Селектор | Пример | Описание |
|
||
|----------|--------|----------|
|
||
| `*` | `*` | Все элементы |
|
||
| `element` | `div` | Элемент по тегу |
|
||
| `#id` | `#main` | Элемент по ID |
|
||
| `.class` | `.button` | Элемент по классу |
|
||
| `[attr]` | `[disabled]` | Элемент с атрибутом |
|
||
| `[attr=value]` | `[type="submit"]` | Точное совпадение атрибута |
|
||
| `[attr^=value]` | `[href^="https"]` | Атрибут начинается с |
|
||
| `[attr$=value]` | `[href$=".pdf"]` | Атрибут заканчивается на |
|
||
| `[attr*=value]` | `[name*="user"]` | Атрибут содержит |
|
||
|
||
### Комбинаторы
|
||
|
||
| Селектор | Пример | Описание |
|
||
|----------|--------|----------|
|
||
| `A B` | `div p` | Потомок (любой уровень) |
|
||
| `A > B` | `div > p` | Прямой потомок |
|
||
| `A + B` | `h1 + p` | Соседний элемент |
|
||
| `A ~ B` | `h1 ~ p` | Все следующие соседние |
|
||
|
||
### Псевдоклассы
|
||
|
||
| Псевдокласс | Пример | Описание |
|
||
|-------------|--------|----------|
|
||
| `:first-child` | `li:first-child` | Первый дочерний |
|
||
| `:last-child` | `li:last-child` | Последний дочерний |
|
||
| `:nth-child(n)` | `tr:nth-child(2)` | n-й дочерний |
|
||
| `:nth-of-type(n)` | `p:nth-of-type(2)` | n-й элемент типа |
|
||
| `:not(selector)` | `div:not(.hidden)` | Исключение |
|
||
| `:has(selector)` | `div:has(p)` | Содержит дочерний элемент |
|
||
| `:contains(text)` | `a:contains("Click")` | Содержит текст |
|
||
|
||
## XPath — Альтернатива
|
||
|
||
### Базовые XPath
|
||
|
||
```xpath
|
||
//element # Все элементы
|
||
//div[@id='main'] # По атрибуту
|
||
//div[contains(@class, 'btn')] # Частичное совпадение класса
|
||
//button[text()='Submit'] # По тексту
|
||
//a[contains(text(), 'Learn')] # Частичное совпадение текста
|
||
//div[@id='main']//p # Вложенность
|
||
//div[1] # Первый div
|
||
//div[last()] # Последний div |