javascript - Pinterest 看板小部件 CSS 样式

Question

最近一个半小时我一直卡在这个问题上，无法解决。所以，我知道 pinterest 小部件会在页面加载时重置它们的类，我已经设法让小部件看起来尽可能好，现在只需要一个元素。

在以下链接的底部，您可以看到小部件 - 以及“查看”框。这就是需要去的地方。

http://innov8web.co.uk/new3/

我已经尝试了所有我能想到的。附上代码片段。任何帮助将不胜感激。

a.PIN_1394396792408_embed_grid_ft{display:none!important;}
#pinterest-widget a.PIN_1394396792408_embed_grid_ft{display:none!important;}
#pinterest-widget span a.PIN_1394396792408_embed_grid_ft{display:none!important;}
#pinterest-widget span span a.PIN_1394396792408_embed_grid_ft{display:none!important;}


a.PIN_1394395968955_embed_grid.PIN_1394395968955_fancy{display:none!important;}
.PIN_1394395968955_embed_grid.PIN_1394395968955_fancy{display:none!important;}

还有我试过的javascript

<script>
function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('span a.PIN_1394396792408_embed_grid_ft{display:none !important;}')
</script>

所以，提前致谢。

Answer 1

我已经使用纯 CSS 成功地设计了 Pinterest 嵌入式小部件的样式。

以下代码删除了标题、边框、背景和链接，只留下图像。它假定您将小部件包含在类为“pinterest”的 div 中。调整以获得您想要的结果:

div.pinterest > span > a {
  display: none !important;
}
div.pinterest > span span:first-child {
  display: none !important;
}
div.pinterest > span {
  box-shadow: 0 0 0 transparent !important;
  background: transparent none !important;
  padding: 0 !important;
  margin: 0 !important;
}