剛剛寫了段代碼發現了個不太注意的問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: blue; position: absolute; } div:last-child{ background-color: red; left:50px; top:50px; /*z-index: 1000;*/ } div:first-child{ z-index: 100; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>
當點擊open with live server（實時服務器打開時效果是第一張圖，其他瀏覽器打開是這樣）
（圖1）
（圖2）
原因在於
div:last-child{ background-color: red; left:50px; top:50px; /*z-index: 1000;*/ }
選中的是div作為父元素的最后一個孩子，而實時服務器會加上一句<script type="text/javascript">導致最后一個孩子是<script>,從而導致出來的樣式和理想中的不同。
