为什么a标签不能继承父标签h1的样式表
问题描述:
同样的一段代码,在空白页面运行时,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("关闭");
}});
答
剪头所指的地方可以直接查看样式继承关系。
浏览器按F12可以打开开发者工具。
剪头所指的地方可以直接查看样式继承关系。
答
你看下a标签的具体样式是哪个属性被覆盖了,谷歌浏览器一看就明白了,要么你截图截a标签的样式,因为具体不清楚你的实际页面是啥,所以没法看
答
你在空白的页面,没有其他的css样式覆盖,那么肯定就会按你设置的显示,但是在实际项目运用中,会有其他的样式,如果不注意处理,可能会导致被其他样式覆盖,导致达不到你要的效果,按你上面的描述,明显就是样式被覆盖了,简直你浏览器按F12,然后点击你要查看的元素,看看他的样式都调用了哪些样式,这样就知道怎么解决问题了