文章标签

Dave Rupert 用一些现代 CSS 魔法 解决了一个经典难题：当组件的 CSS 无法处理我们提供的 内容时会发生什么？

具体情况是，当一个布局网格预期...

日历、购物车、画廊、文件资源管理器和在线库是显示可选择项目的网格（即正方形格点）的一些情况。你懂的，甚至那些要求你选择所有带有斑马线或其他东西的图像的安全检查...

如果曾经存在，这绝对是一个货真价实的 CSS 技巧！@ShadowShahriar 创建了一个 CodePen 演示，使用伪元素在以内联方式显示的列表项之间放置逗号，结果是自然外观的完整句子，带 有正确的标点符号...

前几天我需要在两个固定索引之间选择一些元素 - 就像从第二个到第五个元素。具有讽刺意味的是，我有一篇关于 “有用的 :nth-child 技巧” 的文章，但这并不是其中之一。

答案是...

在每篇 Eric Meyer 博客 文章之间，有一个相当可爱的插图，可以随机从以下五个选项中选择一个：...

这不是一回事。

但它有点像！

Bram 介绍了 ` .bar:nth-child(2) ` 的用法，这有多么令人沮丧。它不是“选择类为 ` .bar ` 的第二个元素”。它是“如果它 *也* 有类 ` .bar `，则选择第二个元素”。好消息是？...

假设你想在 `:hover` 上移动一个元素，以获得有趣的视觉效果。

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

酷酷的。但如果你有...

不存在一刀切的样式。一个有三个图像的图片库可能需要与一个有十二个图像的图片库进行不同的样式设置。你可以使用一些很酷的技巧来添加一些基于数字的逻辑...

Charlotte Jackson 使用这种经典的巧妙技巧来伪随机化 border-radius，为照片网格创建不规则圆形。

蝉是一种长相相当可怕的小虫子。你可能听说过它们。有一种叫做周期蝉...