為什么 CSS 'form' 元素的背景顏色不會針對整個表單發生變化，而不僅僅是它的子 'input' 和 'button' 元素？

Question

我正在制作此博客練習主頁，並在右上角制作一個搜索欄，該搜索欄由包含輸入“類型搜索”元素和按鈕“類型提交”的表單元素組成。

我正在制作 hover 和焦點效果，使用表單的偽類來更改其顏色，但我遇到一個問題，即表單父級中的內部元素獲得效果但表單容器的 rest 不會更改顏色。

我的片段：

 /* general css */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "calibri"; }.header h2 { margin: 15px; padding: 10px; color: azure; }.header h2 a { color: azure; text-decoration: none; }.header h2 a:hover { color: rgb(255, 24, 81); }.sponsers img, .social-media img { width: 40px; }.sponsers img { filter: grayscale(100%); -webkit-filter: grayscale(100%); }.nav-menu ul{ margin: 10px; } /*general css end*/.header { background-color: rgba(0, 0, 0, .6); background-image: url("/Images/blogimage.jfif"); background-blend-mode:multiply; background-size:cover; margin: 0; display: grid; grid-template-columns: auto auto auto; }.header h1 { grid-column: 1 / 3; margin: 2em; color: aliceblue; width: 100%; min-width: 0; overflow: hidden; white-space: initial; word-wrap: break-word; text-align: center; }.nav-menu li { display: inline; padding: 0 5%; }.nav-menu a { display: inline-block; padding: 15px; text-decoration: none; color: aliceblue; font-weight: bold; }.nav-menu a:hover { background-color: rgba(225, 225, 225, .3); color: rgb(255, 24, 81); border-radius: 30px; }.search-bar { display: flex; border-radius: 30px; border: none; outline: none; height: 30px; width: 250px; margin: 15px; padding: 10px; background-color: rgba(236, 220, 220, 0.817); align-items: center; align-content: stretch; justify-content: center; }.search-bar input { border: none; outline: none; background: transparent; color: black; border-radius: inherit; padding: 8px; margin: o; color: inherit; flex: 1; overflow: hidden; }.search-bar:hover { background-color: rgba(255, 24, 81, .6); }.search-bar:focus { background-color: rgba(134, 131, 181, 0.3); border: none; outline: none; }.search-bar:hover::placeholder { color: rgba(236, 220, 220, 0.817); }.search-bar:focus::placeholder { color: rgba(67, 60, 60, 0.6); }.search-bar button { border-radius: inherit; width: 30px; height: 30px; border: none; outline: none; padding: 0; margin: 0; background: transparent; overflow: hidden; cursor: pointer; }.search-bar img { size: 30px; width: 17px; height: 17px; }

 <header class="main-container header"> <h2 class="header-element main-header"><a href="index.html">blog name</a></h2> <nav class="header-element nav-menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav> <form class="header-element search-bar" action=""> <input type="search" placeholder="search the blog"> <button type="submit"> <img src="/images/loupe.png" alt="search-image"> </button> </form> <h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1> </header>

如您所見，當您 hover 結束並單擊搜索欄表單元素時，只有輸入和按鈕會發生顏色變化。 我該如何解決？

Answer 1

簡單選擇器之間的空格是 CSS 中的后代組合子。如果它是兩個用空格分隔的普通選擇器，則表示“匹配第二個選擇器的元素，放置在匹配第一個選擇器的元素內的任意位置”。 由於第二個選擇器是一個偽元素，整個選擇器等同於.label-hi *:before ，可能會在帶有 class label-hi的元素內的任何元素中插入一些東西。

感謝 Ilya Streltsyn，他已經在這里回答了這個問題，我把他的回答放在這里。

這是正確代碼的片段：

 /* general css */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "calibri"; }.header h2 { margin: 15px; padding: 10px; color: azure; }.header h2 a { color: azure; text-decoration: none; }.header h2 a:hover { color: rgb(255, 24, 81); }.sponsers img, .social-media img { width: 40px; }.sponsers img { filter: grayscale(100%); -webkit-filter: grayscale(100%); }.nav-menu ul{ margin: 10px; } /*general css end*/.header { background-color: rgba(0, 0, 0, .6); background-image: url("/Images/blogimage.jfif"); background-blend-mode:multiply; background-size:cover; margin: 0; display: grid; grid-template-columns: auto auto auto; }.header h1 { grid-column: 1 / 3; margin: 2em; color: aliceblue; width: 100%; min-width: 0; overflow: hidden; white-space: initial; word-wrap: break-word; text-align: center; }.nav-menu li { display: inline; padding: 0 5%; }.nav-menu a { display: inline-block; padding: 15px; text-decoration: none; color: aliceblue; font-weight: bold; }.nav-menu a:hover { background-color: rgba(225, 225, 225, .3); color: rgb(255, 24, 81); border-radius: 30px; }.search-bar { display: flex; border-radius: 30px; border: none; outline: none; height: 30px; width: 250px; margin: 15px; padding: 10px; background-color: rgba(236, 220, 220, 0.817); align-items: center; align-content: stretch; justify-content: center; }.search-bar input { border: none; outline: none; background: transparent; color: black; border-radius: inherit; padding: 8px; margin: 0; color: inherit; flex: 1; overflow: hidden; }.search-bar:hover { background-color: rgba(255, 24, 81, .6); }.search-bar:focus { background-color: rgba(134, 131, 181, 0.3); border: none; outline: none; }.search-bar:hover::placeholder { color: rgba(236, 220, 220, 0.817); }.search-bar:focus::placeholder { color: rgba(67, 60, 60, 0.6); }.search-bar button { border-radius: inherit; width: 30px; height: 30px; border: none; outline: none; padding: 0; margin: 0; background: transparent; overflow: hidden; cursor: pointer; }.search-bar img { size: 30px; width: 17px; height: 17px; }

 <header class="main-container header"> <h2 class="header-element main-header"><a href="index.html">blog name</a></h2> <nav class="header-element nav-menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav> <form class="header-element search-bar" action=""> <input type="search" placeholder="search the blog"> <button type="submit"> <img src="/images/loupe.png" alt="search-image"> </button> </form> <h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1> </header>