我正在設定一些內容攔截器（https://developer.apple.com/documentation/safariservices/creating_a_content_blocker）
我正在測驗的 HTML 看起來像這樣：
<div class="<random>">
<div>
<div>
<div>
<a class="bad" />
現在，我想知道我是否可以有一個 CSS 選擇器，它選擇打開.bad但隨后洗掉整個.randomdiv 塊。
我試過這樣的事情：
{
"action": {
"type": "css-display-none",
"selector": "div > div > div > div >a[href*='speedtest.net']"
},
"trigger": {
"url-filter": "^https?:\/ ([^\/:] \\.)?google.*[:\/]"
}
}
和div:has(a)。
似乎沒有任何效果。
任何人都知道它是否可能？我什至找不到任何說明蘋果對此支持的地方（CSS4？）
uj5u.com熱心網友回復：
目前 CSS 中沒有父選擇器，盡管它是最需要的 CSS 功能之一。
缺乏實作的簡單原因是性能問題。 https://snook.ca/archives/html_and_css/css-parent-selectors
我們現在最接近 CSS 中的父選擇器的是:focus-within，如果元素或其任何后代被聚焦，它將匹配一個元素。但是，在您的情況下它沒有用。
您提到的父選擇器的建議實作是:has并且是 CSS 選擇器第 4 級的一部分。
https://www.w3.org/TR/selectors-4/
雖然它還沒有在任何瀏覽器中實作，但它現在是 Safari 技術預覽的一部分，所以我們可能有一天會得到它。然而，它還不是 iOS 技術預覽的一部分，這可能仍然需要很多時間。
https://caniuse.com/css-has
即使沒有 CSS 父選擇器，您所描述的也可以通過 Safari 擴展中的 Javascript 輕松實作。
但是，您需要授予 Safari 擴展權限才能在網頁中注入腳本。
用戶必須接受權限。如果他們拒絕，您將無法通過 javascript 訪問頁面 DOM。
你可以通過進入manifest.json你的 Xcode 專案來做到這一點：AppName => Shared (Extension) => Ressources => manifest
在 content_scripts 你需要添加
"content_scripts": [{
"js": [ "content.js" ],
"matches": [ "<all_urls>" ]
}]
您還可以像以前一樣使用正則運算式選擇您希望擴展程式可以訪問的站點。
https://developer.apple.com/documentation/safariservices/safari_web_extensions/managing_safari_web_extension_permissions
然后在content.js檔案中，您可以添加您的 javascript 代碼以隨意編輯網頁。
這是一個可以用來洗掉壞元素的父元素的函式：
const removeBadElementParent = () =>{
const badElements = document.querySelectorAll('.bad-class-name')
if(badElements.length === 0) return;
badElements.forEach(element =>{
if(!element instanceof HTMLElement) return;
const parent = element.parentElement;
if(!parent instanceof HTMLElement) return;
parent.style.display = 'none'
})
}
您不想立即使用它，但僅在 DOM 加載后才使用它，因此您需要像這樣呼叫它：
if( document.readyState !== 'loading' ) {
removeBadElementParent();
} else {
document.addEventListener("DOMContentLoaded", function(event) {
removeBadElementParent();
});
}
然而，大多數網站都會對 DOM 進行更改，并且可能會在 DOMContentLoaded 事件觸發后添加錯誤元素。因此，您需要添加一個變異觀察者來檢查 DOM 何時更改：
const onDOMMutation = (callback) =>{
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
const observer = new MutationObserver(function(mutations, observer) {
callback();
});
observer.observe(document, {
subtree: true,
attributes: true
});
}
您可以這樣呼叫它，而不是直接呼叫removeBadElementParent函式：
if( document.readyState !== 'loading' ) {
onDOMMutation(removeBadElementParent);
} else {
document.addEventListener("DOMContentLoaded", function(event) {
onDOMMutation(removeBadElementParent);
});
}
https://developer.apple.com/documentation/safariservices/safari_app_extensions/injecting_a_script_into_a_webpage
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428033.html
標籤：css IOS 苹果手机 野生动物园内容拦截器