＆运算符可用于产生以逗号分隔的列表中所有可能的选择器排列。
组合explosion实例
让我们以一个示例来演示组合explosion父选择器的用法。
创建一个名为”
simple.html”
的HTML文件, 其中包含以下数据。
HTML档案：simple.html
<
!DOCTYPE html>
<
html>
<
head>
<
link rel="stylesheet" href="http://www.srcmini.com/simple.css" type="text/css" />
<
title>
Combinatorial Explosion Example<
/title>
<
/head>
<
body>
<
p>
This is first paragraph.<
/p>
<
p>
This is second paragraph which is adjacent to first paragraph ( i.e. p + p ). This will be highlighted.<
/p>
<
div>
This div is adjacent to second paragraph ( i.e. p + div ). This will be highlighted.
<
/div>
<
p>
This is third paragraph adjacent to div ( i.e. p + div ). This will be highlighted.<
/p>
<
i>
This is italic. This will not be highlighted since there is no (p + i) in CSS<
/i>
<
div>
This is second div<
/div>
<
div>
This is div adjacent to second div ( i.e. div + div ). This will be highlighted<
/div>
<
/body>
<
/html>
现在创建一个名为” simple.less” 的文件。它类似于CSS文件。唯一的区别是它以” .less” 扩展名保存。
Less文件：simple.less
p, div {
color: red;
font-family: Lucida Console;
}
p + p, p + div, div + p, div + div {
color: brown;
background-color: aqua;
font-family: "Comic Sans MS";
}将文件” simple.html” 和” simple.less” 都放在Node.js的根文件夹中
现在, 执行以下代码：lessc simple.less simple.css
文章图片
这将编译” simple.less” 文件。将生成一个名为” simple.css” 的CSS文件。
例如：
文章图片
生成的CSS” simple.css” 具有以下代码：
p, div {
color: red;
font-family: Lucida Console;
}
p + p, p + div, div + p, div + div {
color: brown;
background-color: aqua;
font-family: "Comic Sans MS";
}【Less组合explosion父选择器】输出
文章图片
