css 如何快速搭建结构代码的语法

<!-- div * 3 -->
<div></div>
<div></div>
<div></div>

<!-- 2.多个标签并列 -->
<!-- div + p + span -->
<div></div>
<p></p>
<span></span>

<!-- 3.多个标签嵌套 -->
<!-- div > ul > li -->
<div>
    <ul>
        <li></li>
    </ul>
</div>

<!-- 4.标签与类名 -->
<!-- 标签名.类名 -->
<div class="demo"></div>
<p class="demo"></p>
<span class="demo"></span>

<!-- 5.快速搭建div与类名 -->
<!-- .类名 -->
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>

<!-- 6.标签与id -->
<!-- 标签名#id名 -->
<div id="test1"></div>
<p id="test2"></p>
<span id="test3"></span>

<!-- 7.快速搭建div与id -->
<!-- #id名 -->
<div id="red"></div>
<div id="yellow"></div>
<div id="pink"></div>

<!-- 8.快速搭建相同文字的多个标签 -->
<!-- p{内容}*数量 -->
<p>这是一个寂寞的天</p>
<p>这是一个寂寞的天</p>
<p>这是一个寂寞的天</p>
<p>这是一个寂寞的天</p>
<p>这是一个寂寞的天</p>

<!-- 9.递增符号$ -->
<!-- p{$}*数量 -->
<p>我是1号选手</p>
<p>我是2号选手</p>
<p>我是3号选手</p>
<p>我是4号选手</p>
<p>我是5号选手</p>

<!-- 10.组合语法 -->
<!-- div>ul>li*5>a[href="#"]{内容} -->
<div>
    <ul>
        <li><a href="#">我是一个a标签</a></li>
        <li><a href="#">我是一个a标签</a></li>
        <li><a href="#">我是一个a标签</a></li>
        <li><a href="#">我是一个a标签</a></li>
        <li><a href="#">我是一个a标签</a></li>
    </ul>
</div>