前端轻语

:nth-child 可以选择父元素下的字元素，:nth-of-type 也可以。但是它们到底有什么区别呢？

其实区别很简单：:nth-of-type 为什么要叫 :nth-of-type？因为它是以”type“来区分的。也就是说：ele:nth-of-type(n)是指父元素下第 n 个 ele 元素，

而 ele:nth-child(n) 是指父元素下第 n 个元素且这个元素为 ele，若不是，则选择失败。

eg:

1
2
3
4
5
6
7

<div>
  <ul class="demo">
    <p>zero</p>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

随着响应式设计模型的诞生，Web 网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内 IE6 用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心 CSS 技术 Media(媒体查询器)的用法。

准备工作 1：设置 Meta 标签

首先我们在使用 Media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这段代码的几个参数解释：

HTML 提供了 5 种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（      ‌ ‍）在不同浏览器中宽度各异。

 

它叫不换行空格，全称 No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了  ，它是按下 space 键产生的空格。在 HTML 中，如果你用空格键产生此空格，空格是不会累加的（只算 1 个）。要使用 html 实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

 

它叫半角空格，全称是 En Space，en 是字体排印学的计量单位，为 em 宽度的一半。根据定义，它等同于字体度的一半（如 16px 字体中就是 8px）。名义上是小写字母 n 的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是 1/2 个中文宽度，而且基本上不受字体影响。

IE6/IE7/FF 的 CSS Hacks

区别 IE 和非 IE 浏览器

1
2
3
4

#tip {
  background: blue; /*非IE 背景藍色*/
  background: red \9; /*IE6、IE7、IE8背景紅色*/
}

区别 IE6,IE7,IE8,FF

【区别符号】：\9、*、_

前端已经被玩儿坏了！像 console.log() 可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到 Quora 上一个帖子，瞬间又 GET 了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。

HTML 篇

浏览器地址栏运行 JavaScript 代码

这个很多人应该还是知道的，在浏览器地址栏可以直接运行 JavaScript 代码，做法是以 javascript: 开头后跟要执行的语句。比如：

1

javascript: alert('hello from address bar :)');

我们知道，IE6 的存在，因其预装于目前市场占有率最大的 Windows XP 操作系统。对于老态龙钟的 IE6，说拜拜还需要很长的时间。

IE 虽然给我们网页设计师，带来了不少多麻烦，还好，IE 条件注释，给我们解决浏览器兼容问题带来了一个很好的方法。

什么是 IE 条件注释

IE 条件注释，顾名思义就是使用 IE 特有的条件语句来显示代码块。

这些巧妙的逻辑片段只能被 IE 浏览器所支持，其它的浏览器理解为纯粹的 HTML 注释，不起任何作用。条件注释在 IE5 中首次出现，并且得到了 Widnows 浏览器所有后续版本的支持。IE 条件注释及其有效，而且非常容易记住。通过这些技巧，我们可以为基于 Windows 的 IE5、6、7、8 添加一些特殊的行为。这样做的好处是，HTML 和 CSS 代码可以通过验证。主要的缺点是这些注释需要放在 HTML 页面中，而不是放在 CSS 中。这样，当你不需要这些东西，或者有所更改的时候，就需要维护很多的地方。好处是通过这种方式使用条件注释，可以很轻松的管理项目中的目标浏览器，并使得 CSS 补丁文件保持独立自由。更重要的是它帮助我们优化了 CSS 样式表，保证了主要样式表的干净，这对于大型网站来说就很重要了，也许你还没有感觉到它的可爱之处。