[英]Remove / (textnode) from Github Gist lists using CSS or Javascript
我正在嘗試從Github Gists的gist列表中剝離用戶名和/值,問題是沒有可用於/值的類/ id或選擇器。
這是HTML以及指向Github Gists頁面和JSFiddle的鏈接:
<div class="d-inline-block">
<span>
<a data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=167012" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
href="/hanachin">hanachin</a>
/
<a href="/hanachin/2060751fca3444922386879ac666541e">
<strong class="css-truncate-target">file0.txt</strong>
</a>
</span>
<div class="text-gray" style="font-size:11px;">
Last active
<time-ago datetime="2019-03-08T08:24:35Z">Mar 8, 2019</time-ago>
</div>
<span class="f6 text-gray">
Ruby 2.7 ref:
<a href="https://qiita.com/hanachin_/items/1aa1ba38a87dee91aed6" rel="nofollow">https://qiita.com/hanachin_/items/1aa1ba38a87dee91aed6</a>
</span>
</div>
我可以使用以下代碼刪除圖標和用戶名:
[data-hovercard-type="user"] {
display:none;
}
[data-hovercard-type="user"] img {
display:none;
}
但是/沒有任何類,似乎是一個節點/#textnode? 我該如何訪問?
據我所知,文本節點沒有CSS選擇器。 但是要隱藏/
,可以將其font-size
設置為0px
。
因此是一個CSS解決方案(盡管不是最好的,因為我們依靠dom結構保持不變)
.gist-snippet-meta .d-inline-block > span:first-of-type {
font-size: 0px;
}
.gist-snippet-meta .d-inline-block > span:first-of-type > a:last-of-type {
/* Reset font size back ot what it was before we set it to 0 on the parent */
font-size: 14px;
}
另一種選擇是使用Javascript,
與此相關的一個問題是,您將需要等待DOM加載。 因此,將有一段短暫的時間,您的更改尚未應用。
此外,除非您使用Regex來獲取要點網址(在此處犧牲一些性能)或知道用戶名,否則您仍然依賴文件名作為父容器中的最后一個錨元素。
例如,只要用戶名保持不變
Array.from(document.querySelector([data-hovercard-type="user"])).forEach( e => {
var parent = e.parentElement;
parent.innerHTML = parent.querySelector('a[href*="hanachin/"]').outerHTML;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.