覆蓋沒有類的div的背景顏色與nth-child？

Question

我想用class=hamburger-react更改 div 下所有 div 的背景顏色。

我無權訪問這段 html，所以我需要定位好的 div 和 !important 覆蓋。

我試過：

 div.close-overlay-btn:nth-child(2) { background: rgba(0, 100, 172, 0.411) !important; }

 <div class="close-overlay-btn"> <div class="hamburger-react" aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);"> <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div> </div> </div>

但是沒有用。

有小費嗎 ？ 由於這些 div 沒有類，因此比預期的要復雜一些

Answer 1

您在選擇器中的引用無效。 嘗試這個：

.close-overlay-btn>.hamburger-react>div {}

.close-overlay-btn沒有:nth-child(2) 。

.close-overlay-btn是祖父母， .hamburger-react是父母，所有其他嵌套在.hamburger-react中的 div 都是父母的孩子。

 .close-overlay-btn>.hamburger-react>div { background: rgba(0, 100, 172, 0.411) !important; }

 <div class="close-overlay-btn"> <div class="hamburger-react" aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);"> <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div> </div> </div>

Answer 2

如果您真的無法訪問/更改HTML ，那么簡單的方法就是使用!important （我一般不建議這樣做）^{解決方案 1}

其他更好的解決方案是使用 JavaScript 刪除內聯樣式並實現相同的 CSS 但沒有!important^{解決方案 2}

---

您以錯誤的方式使用選擇器，試試這個：

.hamburger-react div

這將影響.hamburger-react的每個 div 孩子

解決方案 1

 .hamburger-react div { background: rgba(0, 100, 172, 0.411) !important; }

 <div class="close-overlay-btn"> <div class="hamburger-react" aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);"> <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div> </div> </div>

解決方案 2

 document.querySelectorAll('.hamburger-react div').forEach(el => el.style.removeProperty('background'))

 .hamburger-react div { background: rgba(0, 100, 172, 0.411); }

 <div class="close-overlay-btn"> <div class="hamburger-react" aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);"> <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div> <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div> </div> </div>