通過 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 結構對元素進行樣式設置。 這可能是有問題的，因為這樣您的腳本對任何更改都是敏感的。

您還可以使用Descendent 組合器來處理元素的子元素，或更具體的Child 組合器

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

不幸的是，文本節點對 CSS 是不可見的。 但是，由於它是文本，您可以以不同的方式隱藏它，例如通過將 font-size 設置為 0，您已經這樣做了。

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

畢竟，所有這一切都非常 hacky，一旦源 DOM 更改就會中斷。

此外，它還存在可訪問性問題，例如aria-hidden屬性將這個名稱元素完全隱藏在輔助技術中。

 .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>