我怎样才能用CSS隐藏？

Question

我有以下代码，该代码位于我无法控制的文档中。我只能选择上传一个自定义CSS文件进行覆盖。我怎么能做到这一点？它是摆脱我们网站上的供应商链接。我很擅长CSS，但他们设置得很棘手。

<div style="display:block !important;text-align: center !important; padding: 15px; visibility:visible !important; opacity:1 !important; 
    height:auto !important; width:auto !important; op:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
    <a href="http://vendorsite.com" target="_blank" style="display:inline !important; font-size: 11px !important; 
        visibility:visible !important; position:relative !important; opacity:1 !important; height:auto !important; width:auto !important; top:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
        powered by Vendor Site
    </a>
</div> 

Answer 1

不，纯CSS不可能，因为HTML中已声明的!importants会覆盖任何CSS，除非上面没有显示父对象，否则你可以覆盖。

如果!important标签不存在，则可以使用以下内容：

---

它有任何父元素吗？你没有任何属性可以在父div上搞乱，所以如果这段代码只是这个代码，你可以尝试：

div { display: none; }

但这是一个可怕的想法，会隐藏所有div。

要应用css，您可以命名一个类名

<div class='parent-div'></div>

.parent-div { display: none; }

id属性：

<div id='parent-div'></div>

#parent-div { display: none; }

或任何其他属性：

<div animal='dog'></div>

div[animal='dog'] {display: none;  }

您可以隐藏子a标记：

a[href="http://vendorsite.com"] { display: none;  }

Answer 2

尝试：

div[style*="!important"] {
  max-height: 0;
  max-width: 0;
  overflow:hidden;
  padding: 0!important;
}

http://jsbin.com/fasid/11/

Answer 3

您可以尝试这样的事情：

div[style*="!important"] {
  -webkit-transform: scale(0);
  -moz-transform:    scale(0);
  -ms-transform:     scale(0);
  -o-transform:      scale(0);
  transform:         scale(0);
}

/* And to make sure... */
div[style*="!important"] a {
  color: transparent;
}

关键是要找出可用于隐藏此元素的其他属性。未在html上标记!important的元素。例如，使用text-indent。

Answer 4

这是一个棘手的问题，您无法控制代码，也无法使用任何选择器，并且更糟糕的是有一堆!important内联规则。

你可以做到＆＃34;消失＆＃34;虽然，链接仍然存在，但没有人会看到它，也没有点击它，尝试这样的事情：

// Get the vendor's link
a[href="http://vendorsite.com"] {
  // Reset mouse cursor
  cursor: default;
  // Set color to match page background background
  color: white;
  // Remove pointer events to make it appear as plain text
  pointer-events: none;
  // Set background to match page background
  background: white;
}
// Set selection color to match page background color 
a[href="http://vendorsite.com"]::selection {
    background: white;
}
// Mozilla selector (optional)
a[href="http://vendorsite.com"]::-moz-selection {
    background: white;
}

讨厌，但做的工作。我已经制作了一个CodePen来展示它的工作原理：Hide with CSS

我希望这会有所帮助，欢呼。