CSS 的最小 Pinterest 小部件

Question

不久前，我凭借非常有限的 CSS 知识设法删除了用户名；小部件寄宿生；图片边界；和 'follow on 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;
}

CSS 的最小 Pinterest 小部件

Minimal Pinterest Widget with CSS

css

widget

pinterest