通过CSS样式表隐藏或删除子元素和字符

Question

我只是有困难在这里弄清楚如何通过CSS隐藏子元素。我知道用JS很容易做到，但是Zendesk小部件脚本不允许这样做。下面是我现在的代码:

let style = document.createElement('style');
style.innerHTML = `
.eRhaXm {
text-align: center !important;
margin-left: 0px !important;
font-size: 0px !important;
},
`;
parent.document.getElementById('webWidget').contentWindow.document.head.appendChild(style);

顺便说一句，当前样式在iframe上。下面是我要隐藏的元素:

<div aria-hidden="true" class="styles__Name-sc-1dpp62d-1 eRhaXm">
<span>Kopi Help</span> &nbsp; · &nbsp;
<span>Bot</span>
</div>

我想去掉  .  和<span>元素Bot。所以它只剩下:

<div aria-hidden="true" class="styles__Name-sc-1dpp62d-1 eRhaXm">
<span>Kopi Help</span>
</div>

Answer 1

因为你想要地址的<span>没有任何类名，你需要基于DOM结构来样式元素。这可能会有问题，因为这样您的脚本对任何更改都是敏感的。

您还可以使用派生组合符来定位元素的子元素，或者使用更具体的子组合符

.eRhaXm span:nth-of-type(2) { display: none; }

不幸的是，文本节点对CSS不可见。但是，由于它是文本，您可以以不同的方式隐藏它，例如通过将font-size设置为0，您已经这样做了。

.eRhaXm { font-size: 0 }
.eRhaXm * { font-size: 1rem }

毕竟，所有这些都是相当粗糙的，一旦源DOM改变就会中断。

此外，它还有可访问性问题，例如，aria-hidden属性对辅助技术完全隐藏了这个name元素。

.eRhaXm {
text-align: center !important;
margin-left: 0px !important;
font-size: 0px !important;
}

.eRhaXm * { font-size: 1rem }
.eRhaXm span:nth-of-type(2) { display: none }

<div aria-hidden="true" class="styles__Name-sc-1dpp62d-1 eRhaXm">
<span>Kopi Help</span> &nbsp; · &nbsp;
<span>Bot</span>
</div>