В этой главе давайте разберемся, как работают родительские селекторы . Можно сослаться на родительский селектор с помощью оператора & (амперсанд). Родительские селекторы вложенного правила представлены оператором & и используются при применении модифицирующего класса или псевдокласса к существующему селектору.
В следующей таблице показаны типы родительского селектора —
| Sr.No. | Типы и описание |
|---|---|
| 1 | Несколько &
Символ & будет представлять ближайший селектор, а также все родительские селекторы. |
| 2 | Изменение порядка выбора
Добавление селектора к унаследованным (родительским) селекторам полезно при изменении порядка селекторов. |
| 3 | Комбинаторный взрыв
& Также может производить все возможные перестановки селекторов в списке, разделенном запятыми. |
Символ & будет представлять ближайший селектор, а также все родительские селекторы.
Добавление селектора к унаследованным (родительским) селекторам полезно при изменении порядка селекторов.
& Также может производить все возможные перестановки селекторов в списке, разделенном запятыми.
пример
В следующем примере демонстрируется использование родительского селектора в файле LESS —
<!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <title>Parent Selector</title> </head> <body> <h2>Welcome to TutorialsPoint</h2> <ul> <li><a>SASS</a></li> <li><a>LESS</a></li> </ul> </body> </html>
Затем создайте файл style.less .
style.less
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду —
lessc style.less style.css
Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
В приведенном выше примере & относится к селектору а .
Выход
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.
-
Сохраните приведенный выше HTML-код в файле parent_selector1.htm .
-
Откройте этот HTML-файл в браузере, отобразится следующий вывод.
Сохраните приведенный выше HTML-код в файле parent_selector1.htm .
Откройте этот HTML-файл в браузере, отобразится следующий вывод.
Оператор « Родительские селекторы» имеет много применений, например, когда вам нужно объединить селекторы вложенного правила иным способом, чем по умолчанию. Другим типичным использованием & является многократное создание имен классов. Для получения дополнительной информации нажмите здесь .