Да, действительно, можно реализовать многоуровневое дерево с помощью только HTML и CSS, используя псевдоклассы и встроенные элементы управления, такие как `<input type="checkbox">` или `<input type="radio">`. В этом случае мы можем использовать CSS для управления стилями и видимостью элементов на основе состояния этих элементов управления.
Вот пример того, как это может быть реализовано:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Многоуровневое дерево на HTML и CSS</title>
<style>
ul {
list-style-type: none; /* Убираем стандартные маркеры списка */
padding-left: 20px; /* Отступ для подуровней */
}
input[type="checkbox"] {
display: none; /* Скрываем чекбоксы */
}
label {
cursor: pointer; /* Курсор в виде указателя при наведении на метку */
display: block; /* Делаем метку блочным элементом */
}
/* Стиль для вложенных списков */
input[type="checkbox"]:checked + ul {
display: block; /* Показываем вложенный список, когда чекбокс отмечен */
}
/* Скрываем вложенные списки по умолчанию */
ul ul {
display: none;
}
</style>
</head>
<body>
<h1>Многоуровневое дерево</h1>
<ul>
<li>
<input type="checkbox" id="item-1">
<label for="item-1">Элемент 1</label>
<ul>
<li>
<input type="checkbox" id="item-1-1">
<label for="item-1-1">Подэлемент 1.1</label>
<ul>
<li>Подподэлемент 1.1.1</li>
<li>Подподэлемент 1.1.2</li>
</ul>
</li>
<li>
<input type="checkbox" id="item-1-2">
<label for="item-1-2">Подэлемент 1.2</label>
<ul>
<li>Подподэлемент 1.2.1</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="item-2">
<label for="item-2">Элемент 2</label>
<ul>
<li>Подэлемент 2.1</li>
<li>Подэлемент 2.2</li>
</ul>
</li>
</ul>
</body>
</html>
```
### Объяснение кода:
1. **Структура**: Мы используем вложенные списки `<ul>` для создания уровней дерева.
2. **Чекбоксы**: Каждый элемент дерева имеет скрытый чекбокс, который управляет показом вложенного списка. Метка `<label>` связана с чекбоксом через атрибут `for`, что позволяет щелкать по метке, чтобы активировать чекбокс.
3. **CSS**:
- Чекбоксы скрыты с помощью `display: none;`, поэтому пользователь не видит их.
- Вложенные списки (`ul ul`) скрыты по умолчанию.
- Используя селектор `input[type="checkbox"]:checked + ul`, мы отображаем вложенный список, если соответствующий чекбокс отмечен.
Таким образом, без использования JavaScript мы можем реализовать интерактивное дерево, полагаясь исключительно на функциональность HTML и CSS.