在本章中,让我们了解父选择器的工作原理.可以使用& (&符号)运算符引用父选择器.嵌套规则的父选择器由& 运算符表示,在将修改类或伪类应用于现有选择器时使用.
下表显示父选择器的类型 :
Sr.No. | 类型&描述 |
---|---|
1 | 多个& & 将代表最近的选择器以及所有父选择器. |
2 | 更改选择器顺序 当选择器排序更改时,将选择器预先添加到继承的(父)选择器非常有用./p> |
3 | Combinatorial Explosion & 也可以在逗号分隔的列表中产生选择器的所有可能排列. |
以下示例演示了在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 文件.
a { color: #5882FA; &:hover { background-color: #A9F5F2; } }
您可以将 style.less 文件编译为 style.css 使用以下命令 :
lessc style.less style.css
执行上述命令;它将使用以下代码自动创建 style.css 文件;
a { color: #5882FA; } a:hover { background-color: red; }
在上面的示例中,& 指的是选择器 a .
按照以下步骤查看上述代码的工作原理;
将上述html代码保存在 parent_selector1.htm 文件中.
打开此HTML文件在浏览器中,将显示以下输出.
父选择器运算符有许多用途,例如,当您需要以不同于其他方式组合嵌套规则的选择器时默认. & 的另一个典型用法是重复生成类名.