本文介绍了带有 CSS 的最小 Pinterest 小部件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

A while ago I had managed with very limited CSS knowledge to remove the user name; widget boarder; picture boarder; and 'follow on Pinterest' button. This was achieved by tagging the widget (in HTML) with:

div id="pinterest-container"

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

and then using the following CSS commands to hide everything but the pictures:

#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

However a short time ago this stopped working and the picture boarders, user name and ffollow button all returned: http://www.andrewmacpherson.me/p/precedence.html

如果有人能帮我再次隐藏这些,我会非常高兴,我一直在寻找和测试,但没有运气!

I would be very greateful if someone could help me hide these again, I've been searching and testing but with no luck!

非常感谢

安德鲁

推荐答案

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

I remember hiding things like this back in the Myspace days. Overriding certain elements was often a complicated and brittle process. Fortunately, we've now got CSS attribute selectors, providing a more elegant way to handle situations such as yours. The $= part of the following selectors are targeting class attribute values ending with those certain suffixes (_img, _col, etc.). Hopefully, these overrides will last a little longer than the last batch.

移除图片和小部件边框:

Remove picture and widget borders:

#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;
}

要移除滚动条,您必须做一些更一般的事情.注意:这将显示每组图像中的所有内容,因此不会发生截断.

To remove the scrollbars, you'll have to do something a bit more general. Note: this will show all of the content in each group of images, so no truncation occurs.

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

这篇关于带有 CSS 的最小 Pinterest 小部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 22:05
查看更多