为什么a标签不能继承父标签h1的样式表

Question

同样的一段代码，在空白页面运行时，a标签可以继承父标签的样式表，效果如下

当这段代码运行在实际页面时，a标签就不能继承父标签的样式表了，效果如下

代码如下

open();
    function open() {
             var body = document.getElementsByTagName("body")[0];
             var textnode=document.createTextNode("0 results");
             var a=document.createElement("a");
             a.setAttribute("href","http://127.0.0.1/edit.html");
             a.appendChild(textnode);
             var h1=document.createElement("h1");
             h1.setAttribute("id","showdata");
             h1.style.cssText="width:200px;height:200px;position: relative;top: 100px;left: 80px;z-index:99999999"; 
             h1.appendChild(a);
             
             var div = document.createElement("div"); //创建 div
             div.setAttribute("id", "serchBox"); // 给其设置 id
             div.style.cssText = "width: 300px;height: 400px;position: fixed;bottom: 0;right: 3.625rem;background:#b6b177;z-index:999999999;pointer-events:auto; "
    div.innerHTML = `
                      <button id="close"  Style='float:right' title="关闭页面">关闭窗口</button>
                     `
             ;//关闭按钮
             div.appendChild(h1);
    body.appendChild(div); //加入到 body
    console.log(body);
    }
             document.getElementById('close').addEventListener('click',function() {
               let close = document.getElementById("close");
               if (close) {
                   let body = document.getElementsByTagName("body")[0];
                   let searchBox = document.getElementById("serchBox");
                   body.removeChild(searchBox);
                   console.log("关闭");
         
               }});

Answer 1

浏览器按F12可以打开开发者工具。

剪头所指的地方可以直接查看样式继承关系。