www.2016338.comLess扩展嵌套选择器

算法 ww9992019com 发表于 1 周前

www.2016338.com开户请拨15974937077英超西安雁塔区n0r65O<div style="width:100%;float:left;" class="article-content">

                <input type="hidden" name="article_id" id="article_id" value="8250">
                <input type="hidden" name="catid" id="catid" value="0">

                <div>

<div>

    嵌套选择使用扩展选择器匹配。

</div>

</div>

<div>

<h2>

    示例

</h2>

<div>

    下面的例子演示了使用在 Less 文件扩展嵌套选择:

</div>

<h3>

    extend_syntax.html

</h3>

<pre>&lt;!doctype html&gt;

&lt;head&gt;

&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="style"&gt;

&lt;h3&gt;Hello, You guys!&lt;/h3&gt;

&lt;/div&gt;

&lt;p class="img"&gt;Welcome to Yiibai Yiibai&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>

<div>

    接下来,创建文件 style.less

</div>

<h3>

    style.less

</h3>

<pre>.style {

h3{

color: #BF70A5;

font-size: 30px;

}

}

.img:extend(.style h3){}
</pre>

<div>

    你可以编译style.less文件使用以下命令来生成 style.css 文件:

</div>

<pre>lessc style.less style.css
</pre>

<div>

    接着执行上面的命令,它会自动创建 style.css 文件,下面的代码:

</div>

<h3>

    style.css

</h3>

<pre>.style h3,

.img {

color: #BF70A5;

font-size: 30px;

}
</pre>

<div>

    让我们来执行以下步骤,看看上面的代码工作:

</div>

<ul>

    <li>

        <div>

            保存上面的 html 代码到 extend_syntax.html 文件。

        </div>

    </li>

    <li>

        <div>

            在浏览器中打开该HTML文件,输出如下得到显示。

        </div>

    </li>

</ul>

</div>

<p>

<img src="/uploads/tutorial/20160113/1-16011315162Q53.png" alt="">

</p>

                <br>
                <p style="text-align:center;float:left;width:100%;margin-top:24px;margin-bottom:18px;">
                        <button class="layui-btn layui-btn-danger" id="btn-reward"> ¥ 我要打赏 </button>  
                        <button class="layui-btn" id="article-perfect">
                            <i class="layui-icon layui-icon-edit"></i>教程纠错
                        </button>
                        <button class="layui-btn layui-btn-normal" id="action-collection">
                            <i class="layui-icon layui-icon-rate"></i>收藏
                        </button>
                </p>



                <div style="width:100%;margin-bottom: 16px; height: 32px;margin-top:18px;float:left;">

                    <span style="float:left;">上一篇:<a href="http://f2e.im/u/ww9992019com" title="Less扩展内部规则集"><i class="layui-icon"></i>
                            Less扩展内部规则集</a></span>
                                            <span style="float:right;">下一篇:<a href="http://f2e.im/u/ww9992019com" style="float:right;" title="下一篇:Less使用扩展精确匹配"><i class="layui-icon"></i>
                            Less使用扩展精确匹配</a></span>
                                            <div id="googlead" style="float:left;margin-top:8px;">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- yiibai下方 -->
                        <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-1090193214637198" data-ad-slot="6494738921"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>

                <div style="width:100%;margin-top:18px;float:left;">


            </div>
暂无回复,说出你的观点吧
登录后即可参与回复