css - 使用 CSS 的最小 Pinterest 小部件

Question

不久前，我用非常有限的 CSS 知识设法删除了用户名；小部件寄宿生；图片边界；和“关注 Pinterest”按钮。这是通过标记小部件(在 HTML 中)来实现的:

div id="pinterest-container"

然后使用以下 CSS 命令隐藏除图片以外的所有内容:

#pinterest-container > span { box-shadow: none !important; }
#pinterest-container > span > span > a { display: none; }

#pinterest-container span a:nth-child(3){
display: none !important;
}

.post-body center div#pinterest-container span span a{
display: block !important;
}

.post-body center div#pinterest-container span span span a{
display: block !important;
}

然而不久前它停止工作并且图片边界、用户名和关注按钮全部返回:http://www.andrewmacpherson.me/p/precedence.html

如果有人能帮我再次隐藏这些，我将非常感激，我一直在搜索和测试但没有运气!

非常感谢

安德鲁

Answer 1

我记得在 Myspace 时代隐藏这样的东西。覆盖某些元素通常是一个复杂而脆弱的过程。幸运的是，我们现在有了 CSS 属性选择器，提供了一种更优雅的方式来处理您遇到的情况。以下选择器的 $= 部分针对 class 属性值以结尾的那些特定后缀 (_img, _col 等)。希望这些覆盖会比上一批持续更长的时间。

删除图片和小部件边框:

#pinterest-container [class$=_img] {
  display: block !important;
  box-shadow: none !important;
  border-radius: 0 !important;  
}

#pinterest-container [class$=_col] {
  padding: 0;
}

杀死以下按钮:

#pinterest-container [class$=_button] {
  display: none !important;
}

要删除滚动条，您必须执行一些更通用的操作。 注意:这将显示每组图像中的所有内容，因此不会发生截断。

#pinterest-container span span {
  overflow: hidden !important;
  height: 100% !important;
}