CSS3选择器「:nth-child()」与「:nth-of-type()」用法大不同, :nth-of-type 用法, CSS 伪类

    虽然说目前CSS3还没正式的标准化,但新的属性已为网页带来许多的便利,像是大家所熟悉的圆角框、阴影、渐层、多栏位….,甚至目前正夯的RWD自适应,这些都是需要使用到CSS3,除此之外CSS3还提供了许多的选择器可使用,如此一来就可大量的减少一些类别的设定,直接透过HTML的标签就可直接进行选择与样式的设定,虽然说很方便,但在CSS3有二个选择器长的很像nth-child与nth-of-type,在正常情况下,二个用起来很像,但若HTML的结构改变时,二个就大不同啦!!!因此梅干作了一个小范例,来帮大家解惑,这二个属性的最大差别什么地方。   :nth-of-type() 这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个相同兄弟节点的元素,其中 n 为正值或零值。简单点说就是,这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。 /* 在每组兄弟元素中选择第四个 <p> 元素 */… Read More

shell命令行下批量重命名文件, 批量修改文件名, 批量替换文件名, command

  有一批名称格式相同文件需要重命名成另一种格式,例如“image_0_small.png”批量修改为“image_0_large.png”,用命令行可以轻松完成,下面就来介绍三种不同的解决方法。   方法1:for循环+mv命令 for i in `ls image*small.png`; do mv $i ${i%small.png}large.png done 在上面的三行代码中,首先用ls image*small.png通配筛选出了需要重命名的文件,避免将目录中其他格式的文件也进行重命名;然后对每一个文件执行mv操作,${i%small.png}是匹配并删除$i后面的small.png,然后补上large.png就行了。   方法2:rename一行搞定… Read More

Silver Searcher – 程序员的代码搜索工具, 一个比ack速度快n倍的代码搜索工具: ag, A Code Searching Tool for Programmers

Ag有什么好处? 它比一个数量级快ack。 它忽略了你.gitignore和你的文件模式.hgignore。 如果您的源代码中有文件您不想搜索,只需将其模式添加到.ignore文件中即可。(*咳嗽* *.min.js*咳嗽*) 命令名称比起第33行短ack,所有的键都在主排上! Ag现在相当稳定 大多数更改是新功能,小错误修复或性能改进。比我的基准要快得多: ack test_blah ~/code/ 104.66s user 4.82s system 99% cpu 1:50.03… Read More

Linux: 更深入地了解Linux权限, A deeper dive into Linux permissions, r,w,x

  在 Linux 上查看文件权限时,有时你会看到的不仅仅是普通的 r、w、x 和 -。如何更清晰地了解这些字符试图告诉你什么以及这些权限如何工作?   在 Linux 上查看文件权限时,有时你会看到的不仅仅是普通的 r、w、x 和 -。除了在所有者、组和其他中看到 rwx 之外,你可能会看到 s 或者 … Read More

Linux: 如何用 Linux 命令行发电子邮件, shell 发电子邮件

  Linux 可以用多种方式通过命令行发送电子邮件。有一些方法十分简单,有一些相对会复杂一些,不过仍旧提供了很多有用的特性。选择哪一种方式取决于你想要什么 —— 向同事快速发送消息,还是向一批人群发带有附件的更复杂的信息。接下来看一看几种可行方案:   mail 发送一条简单消息最便捷的 Linux 命令是 mail。假设你需要提醒老板你今天得早点走,你可以使用这样的一条命令: $ echo "Reminder: Leaving at 4 PM… Read More

Bootstrap: 弹出窗口上下居中, 弹出modal上下居中, How to align Bootstrap modal vertically center

  使用CSS margin-top属性 默认情况下,Bootstrap模式窗口与页面顶部对齐,但有一些余量。但是您可以使用简单的JavaScript技巧在页面中间垂直对齐它,如下例所示。此解决方案将动态调整模态的对齐方式,即使用户调整浏览器窗口大小,也始终将其保留在页面的中心。 <!DOCTYPE html> <html lang="en"> <head> <title>Vertical Center Alignment of Bootstrap Modal Dialog</title> <link rel="stylesheet"… Read More

Bootstrap: 弹出窗口Modal不消失, 点击外部不关闭窗口Modal, How to prevent Bootstrap modal from closing when clicking outside

  使用Modal的backdrop选项 默认情况下,如果单击Bootstrap模式窗口外部,即在背景或暗区域,它将关闭并消失。当你在模态内并按下键盘上的退出键时也会发生这种情况。但是你可以通过将modal的backdrop选项设置为static和keyboard选项来防止这种情况发生false,如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Disallow Bootstrap Modal from Closing</title> <link rel="stylesheet" href="css/bootstrap.min.css">… Read More

如何使用 Timeline 工具, chrome插件, 网站调试工具, Timeline时间线事件参考

  使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。   TL;DR 执行 Timeline 记录,分析页面加载或用户交互后发生的每个事件。 在 Overview 窗格中查看 FPS、CPU 和网络请求。… Read More