爲什麼我無法獲得這個輸入元素來處理我的html？

-2

我的目標：創建夜間模式按鈕，將網站的顏色更改爲較暗的顏色。爲什麼我無法獲得這個輸入元素來處理我的html？

方法：我使用一個綁定到輸入元素的標籤元素，當它被激活時會改變網站內部任何東西的顏色。（認爲一個「夜間模式」按鈕，將使整個網站夜間閱讀器變暗）。

有人能告訴我爲什麼我想出的代碼不工作？我已經與其他編碼人員進行了交叉檢查，我們不明白爲什麼......它可能非常簡單。

* { 
 
    color:red; 
 
    margin: 0 auto; 
 
    font-family: 'Raleway', sans-serif; 
 
} 
 
.wrapper { 
 
    width:80%; 
 
    height:100%; 
 
    margin:0 auto; 
 
    border: 1px solid rgb(22, 36, 218); 
 
} 
 
.header{ 
 
    height:60px; 
 
} 
 
.nav { 
 
    height:30px; 
 
    border: 1px solid rgb(0,0,0); 
 
} 
 
input#Color { 
 
    position:absolute; 
 
} 
 
input#Color:checked + .nav { 
 
    background-color: rgb(0,0,0); 
 
}

<!DOCTYPE html> 
 
<!-- DOCKMANN INDEX PAGE - CODE: D001 --> 
 
<html> 
 

 
<head> 
 
<!-- CSS --><link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
 
<!-- JS --><script src="script.js"></script> 
 

 
    <link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"> 
 
</head> 
 
    <!-- END HEAD --> 
 
<body> 
 
    <label for="Color">Poop</label> 
 
    <input type="checkbox" id="Color"/> 
 
<div class="wrapper"> 
 
    <div class="header"> 
 
     test header 
 
    </div> 
 
    <!-- end header --> 
 
    <div class="nav"> 
 
     <p> 
 
     test nav 
 
     </p> 
 
    </div> 
 
    <!-- end nav --> 
 
    <div class="content"> 
 
     test content 
 
     <div class="mainContent"> 
 
     mainContent 
 
     </div> 
 
     <div class="sidebar"> 
 
     Sidebar 
 
     </div> 
 
    </div> 
 
    <!-- end content --> 
 
    <div class="footer"> 
 
     test footer 
 
    </div> 
 
    <!-- end footer --> 
 
</div> 
 
<!-- end wrapper --> 
 
</body> 
 

 
</html>

來源

2016-10-30 Guren

這是因爲.nav嵌套在.wrapper和CSS希望它是一個兄弟。

嘗試

input#Color:checked + .wrapper

，或者如果你只希望影響了資產淨值;

input#Color:checked + .wrapper .nav

來源

2016-10-30 04:22:24

[這裏]（https://jsfiddle.net/zmzndt9a/）小提琴示範。打我一下:) – Li357

謝謝你玫瑰，幫助一個noob！你修好了。 – Guren

對不起@AndrewLi :)你也盡力做出小提琴！ –

爲什麼我無法獲得這個輸入元素來處理我的html？

回答

相關問題