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

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

问题描述:

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

img


img


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

img

img


代码如下

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("关闭");
         
               }});

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

img


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

你看下a标签的具体样式是哪个属性被覆盖了,谷歌浏览器一看就明白了,要么你截图截a标签的样式,因为具体不清楚你的实际页面是啥,所以没法看

你在空白的页面,没有其他的css样式覆盖,那么肯定就会按你设置的显示,但是在实际项目运用中,会有其他的样式,如果不注意处理,可能会导致被其他样式覆盖,导致达不到你要的效果,按你上面的描述,明显就是样式被覆盖了,简直你浏览器按F12,然后点击你要查看的元素,看看他的样式都调用了哪些样式,这样就知道怎么解决问题了