惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Check Point Blog
J
Java Code Geeks
H
Hackread – Cybersecurity News, Data Breaches, AI and More
D
Docker
腾讯CDC
The GitHub Blog
The GitHub Blog
大猫的无限游戏
大猫的无限游戏
Microsoft Security Blog
Microsoft Security Blog
GbyAI
GbyAI
Stack Overflow Blog
Stack Overflow Blog
博客园 - 司徒正美
T
The Blog of Author Tim Ferriss
Vercel News
Vercel News
P
Proofpoint News Feed
雷峰网
雷峰网
博客园_首页
B
Blog RSS Feed
Microsoft Azure Blog
Microsoft Azure Blog
爱范儿
爱范儿
V
V2EX
F
Fortinet All Blogs
酷 壳 – CoolShell
酷 壳 – CoolShell
MyScale Blog
MyScale Blog
S
SegmentFault 最新的问题

CSS | 酷 壳 - CoolShell

Chrome开发者工具的小技巧 | 酷 壳 - CoolShell 浏览器的渲染原理简介 | 酷 壳 - CoolShell 神奇的CSS形状 | 酷 壳 - CoolShell CSS 布局:40个教程、技巧、例子和最佳实践 | 酷 壳 - CoolShell Web开发中需要了解的东西 | 酷 壳 - CoolShell CSS图形 | 酷 壳 - CoolShell 一些有意思的贴子和工具 | 酷 壳 - CoolShell Web开发人员速查卡 | 酷 壳 - CoolShell 30+ Web下拉菜单 | 酷 壳 - CoolShell 40个很不错的CSS技术 | 酷 壳 - CoolShell 一些非常有意思的杂项资源 | 酷 壳 - CoolShell 纯CSS做的3D效果 | 酷 壳 - CoolShell Web中的省略号 | 酷 壳 - CoolShell 9个最常见IE的Bug及其fix | 酷 壳 - CoolShell
写HTML和CSS的新方法 | 酷 壳 - CoolShell
陈皓 · 2010-05-11 · via CSS | 酷 壳 - CoolShell

Zen Coding 一个用来简化编写 HTML,XML, XSL (或是其它一些诸如此类格式的编辑器)。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML,很像CSS语法。下面是一个例子:

div#page>div.logo+ul#navigation>li*5>a

展开后会成为下面这个样子:

<div id="page">
        <div></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

可以看出来,#代表ID,>代表下一层。

如果你写下:

select>option#item-$*3

那么将会得到:


<select>
	<option id="item-1"></option>
	<option id="item-2"></option>
	<option id="item-3"></option>
</select>

看上去很不错吧。目前,其支持如下的编辑器:

  • AptanaHowToEn
  • TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
  • Coda (Mac) — external download, via TEA for CodaPlug-ins > TEA for Coda > Zen Coding menu item
  • Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
  • Komodo Edit/IDE (crossplatform) — external downloadTools > Zen Coding menu item
  • Notepad++ (Windows). Zen Coding menu item
  • PSPad (Windows). Scripts > Zen Coding menu item
  • <textarea> (browser-based). See online demo.
  • editArea (browser-based). See online demo.

还有下面这些第三方的插件:

Loading...