ZenCoding 个人理解和总结

我的理解：ZenCoding是一个html简写的语法，可以最快速的生成html。

不少IDE应该都支持，我用的intellij idea是支持的。

ZenCoding表示和CSS/JS有相通之处，比如说 . 表示的类，#表示的是id， >表示子代元素。

特殊的几点是：+表示兄弟元素。
{xxx}表示内容
[xxx]表示属性

直接上例子：

例子1：

.testDiv   或者   div.testDiv
=>

<div class="testDiv"></div>

从上述例子可以发现

a. . 表示的是class

b.ZenCoding默认div元素。

例子2：

#divId

=>

<div id="divId"></div>

从上述例子可以发现，#表示的是ID，同JS和CSS。

例子3：

.nav>ul.menu>li.list*3

=>

<div class="nav">

    <ul class="menu">

        <li class="list"></li>

        <li class="list"></li>

        <li class="list"></li>

    </ul>

</div>

从上述例子可以发现,> 大于符号表示的子代元素。 *N 表示的是重复多少个。

例子4：

.content1+.content2+.content3

=>

<div class="content1"></div>

<div class="content2"></div>

<div class="content3"></div>

从上述例子可以发现,+表示的兄弟节点。

例子5：

(#one>ui.nav>li.list*2)+(#two>p>span.content)

=>

<div id="one">

    <ui class="nav">

        <li class="list"></li>

        <li class="list"></li>

    </ui>

</div>

<div id="two">

    <p><span class="content"></span></p>

</div>

例子6：

span.color{red}

=>

<span class="color">red</span>

从上述例子可以发现,{xxx}表示内容。

例子7：

a.to_main[href='www.baidu.com']{百度}

=>

<a href="www.baidu.com" class="to_main">百度</a>

从上述例子可以发现,[key=value]表示属性，其格式为前为属性名后为值。

例子8：

.one.two.three

=>

<div class="one two three"></div>

从上述例子可以发现,一个div支持多个class的。

例子9：

ul.menu>li.item${item_$$}*3

=>

<ul class="menu">

    <li class="item1">item_01</li>

    <li class="item2">item_02</li>

    <li class="item3">item_03</li>

</ul>

从上述例子可以发现,$可以从0开始随机生成数，一个$表示从1开始，二个$表示从01开始，非常方便。

例子10

form>.control-group>(.radio>(label>input[type="radio",name="only"]{测试$}))*4

=>

<form action="">

    <div class="control-group">

        <div class="radio"><label for=""><input type="radio" name="only">测试1</label></div>

        <div class="radio"><label for=""><input type="radio" name="only">测试2</label></div>

        <div class="radio"><label for=""><input type="radio" name="only">测试3</label></div>

        <div class="radio"><label for=""><input type="radio" name="only">测试4</label></div>

    </div>

</form>

说明：

1. [] 表示的是属性，其为数组属性，如果有多个属性使用 [type="radio",name="only",xxx] 利用逗号分隔。

2. {}表示的值。

3. $表示的依次递增。

例子11

.dropdown>button.btn.btn-primary.dropdown-toggle>span.caret

=>

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>

</div>

说明:

从上述标红的代码可以知道若一个元素有多个class 那么只需要不停的使用. 就可以了。

综上：

ZenCoding个人觉得的常用方法都在上面了，如果还有其他常用的，烦请补充。

个人写的难免有错误和遗漏，欢迎指正。

我也是初学者。

巴特西