Question

我不确定这是否可能，但是我们使用了第三方SAS系统，该系统可以在员工登录时为他们提供各种级别的Admin控制/访问权限。

该系统及其网络代码段已嵌入到我们的网站中，我们可以使用自定义CSS控制/影响大多数元素。

我们要隐藏/不显示3 x“按钮”，这些按钮显示在各个页面的导航菜单上。

我们已经使用display：none这样的名称元素：

body #SFctr #SFevtmnunte { display: none !important; }

这似乎对于删除我们要隐藏的所有具有类名的元素非常有用？但是，我们需要隐藏以下3个“单击”元素：

<a onclick="SF.open('!event/new')">Add New Event</a>
<a onclick="SF.lib.dsp('SFevtdbdscl',true)">Embed/Link</a>
<a onclick="SF.evt.dbd('atg',this)">Export <span data-fld="atg">QuickBooks</span></a>

SAS提供程序不会为我们创建特殊级别的访问权限，所以我想知道是否有一种方法可以使用自定义CSS中的某些内容来替代这些按钮的出现？

这3次点击是静态的，代码始终看起来像这样。任何人都可以通过CSS隐藏这三个元素吗？

编辑要添加一些可能需要的信息-在许多地方都使用了点击功能，因此我们不能完全阻止它们。在此阶段，我们只需要阻止这三个即可。我用FF检查器可以提供以下附加信息：

<a onclick="SF.lib.dsp('SFevtdbdscl',true)">Embed/Link</a>
innerhtml: Embed/Link
outerhtml: <a onclick="SF.lib.dsp('SFevtdbdscl',true)">Embed/Link</a>
css selector: #SFevtdbd > div:nth-child(1) > nav:nth-child(3) > a:nth-child(3)
css path(important bits): div.SF_li div#SFctr.SF div#SFpne.SF3 div#SFevtpne.SFpne div#SFevtdbd.SFevtpne div.SFbox nav a
xpath: body/div[4]/div/div[5]/div/div/div/div/div/div[2]/div/div[1]/div[3]/div[2]/div[1]/nav/a[3]


<a onclick="SF.evt.dbd('atg',this)">Export <span data-fld="atg">QuickBooks</span></a>
innerhtml: Export <span data-fld="atg">QuickBooks</span>
outerhtml: <a onclick="SF.evt.dbd('atg',this)">Export <span data-fld="atg">QuickBooks</span></a>
css selector:  #SFevtdbd > div:nth-child(1) > nav:nth-child(3) > a:nth-child(5) 
css path(important bits): div.SF_li div#SFctr.SF div#SFpne.SF3 div#SFevtpne.SFpne div#SFevtdbd.SFevtpne div.SFbox nav a 
xpath: /html/body/div[4]/div/div[5]/div/div/div/div/div/div[2]/div/div[1]/div[3]/div[1]/div[1]/nav/a[5]


<a onclick="SF.open('!event/new')">Add New Event</a>
innerhtml: Add New Event
outerhtml: <a onclick="SF.open('!event/new')">Add New Event</a>
css selector: #SFevtcalnav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1)
css path(important bits): div.SF_li div#SFctr.SF div#SFpne.SF3 div#SFevtpne.SFpne div#SFevtcal.SFevtpne nav#SFevtcalnav ul li a
xpath: /html/body/div[4]/div/div[5]/div/div/div/div/div/div[2]/div/div[1]/div[3]/div[7]/nav/ul/li[2]/a

有帮助吗？

Answer 1

由于您说过这些按钮始终是静态的，因此可以尝试定位属性onclick和值。除非有其他按钮具有相同的onclick值，否则这将专门选择这些按钮

a[onclick="SF.open('!event/new')"],
a[onclick="SF.lib.dsp('SFevtdbdscl',true)"],
a[onclick="SF.evt.dbd('atg',this)"] {
  display: none !important;
}

<a onclick="SF.open('!event/new')">Add New Event</a>
<a onclick="SF.lib.dsp('SFevtdbdscl',true)">Embed/Link</a>
<a onclick="SF.evt.dbd('atg',this)">Export <span data-fld="atg">QuickBooks</span></a>

另一项保证测试：

a[onclick="SF.open('!event/new')"] {
  color: red;
}

a[onclick="SF.lib.dsp('SFevtdbdscl',true)"] {
  color: blue;
}

a[onclick="SF.evt.dbd('atg',this)"] {
  color: green;
}

<a onclick="SF.open('!event/new')">Add New Event</a>
<br/>
<a onclick="SF.lib.dsp('SFevtdbdscl',true)">Embed/Link</a>
<br/>
<a onclick="SF.evt.dbd('atg',this)">Export <span data-fld="atg">QuickBooks</span></a>

Answer 2

如果您要隐藏具有<a>属性的所有 onclick个元素，可以按以下方式定位：

a[onclick]
{
    display: none;
}

否则，您将需要一个更具体的选择器。如果它们位于已标识的元素（如标题）中，则可以通过将父元素的选择器放在<a>选择器之前来定位它们。

#parentElementID a[onclick]
{}

Answer 3

您可以在CSS中使用属性选择器来隐藏链接，如下所示：

a[onclick] {
  display:none;
}

Answer 4

您可以使用jQuery根据内容进行选择：

$(document).ready(function() {
    $('a:contains("Add New Event")').hide()
});

https://api.jquery.com/contains-selector/

如何使用自定义CSS隐藏特定的<a onclick=""> </a>按钮？

4 个答案: