示例:
div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2
或者
#box>p.title+(ul.list>li.child$*3)+#box2
<!-- .col-lg-3.col-md-3.col-sm-4.col-xs-6*8>img[src="img/$.jpg"] -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/1.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/2.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/3.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/4.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/5.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/6.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/7.jpg" alt=""></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/8.jpg" alt=""></div>
html初始结构
下图中的结构,偷懒的都会直接一个!=> Tab 解决,这样可以快速生成基础的结构,同时防止手写时忘记某个代码块,输入错误的代码。
二、id(#)、class(.)
- div#test
<div id="test"></div>
- div.test
<div class="test"></div>
三、子节点(>),兄弟节点(+),上级节点(^)
div>ul>li>p
<div>
<ul>
<li>
<p></p>
</li>
</ul>
</div>
div+ul+p
<div></div>
<ul></ul>
<p></p>
div>ul>li^div
(这里的^
是接在li后面所以在li的上一级,与ul成了兄弟关系,当然两个^^
就是上上级)
<div>
<ul>
<li></li>
</ul>
<div></div>
</div>
四、重复(*)
- 用“
$
”符号实现1到n的自动编号(“*
”实现多个元素)
// 输入
li.item$*3
// 按下TAB键
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
- 可在 “$” 后添加 “
@n
” 修改编号的起始值为n。
// 输入
li.item$@3*3
// 按下TAB键
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
- 可在 “$” 后添加 “
@-
” 修改编号的方向。
// 输入
li.item$@-3*3
// 按下TAB键
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
// ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
五、 分组 ()
div>(ul>li>a)+div>p
(括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关)
<div>
<ul>
<li><a href=""></a></li>
</ul>
<div>
<p></p>
</div>
</div>
解释:这里如果不加括号的话,猜想下,a+div这样div就是和a是兄弟关系了,会包含在li里面。懂了吧哈哈
<div>
<ul>
<li>
<a href=""></a>
<div>
<p></p>
</div>
</li>
</ul
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
六、文本{}
ul>li.test${测试$}*3
({里面填写内容,可以和$一起组合使用哦})
<ul>
<li class="test1">测试1</li>
<li class="test2">测试2</li>
<li class="test3">测试3</li>
</ul>
七、隐式标签
这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。
例如:.test
<div class="test"></div>
例如:ul>.test$*3
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
例如:select>.test$*5
<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
<option class="test4"></option>
<option class="test5"></option>
</select>
例如:table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
例如:em>.class
<em><span class="class"></span></em>
八、css缩写
- 1、值,比如要定义元素的宽度,只需输入w100,即可生成
width: 100px;
除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:
height: 10%;
margin: 5em;
单位别名列表:
p 表示%
e 表示 em
x 表示 ex
- 2、附加属性
可能你之前已经了解了一些缩写,比如 @f,可以生成:
@font-face {
font-family:;
src:url();
}
九、属性([attr])
参考:
https://blog.csdn.net/fghsfeyhdf/article/details/78069259
https://www.cnblogs.com/dirgo/p/10239161.html (超全,推荐)
https://blog.csdn.net/qq_33744228/article/details/80910377#commentBox