CSS
div.online:last-child {
color:green;
}
div.offline:last-child {
color:green;
}
JavaScipt
var x=navigator.onLine;
var div = document.createElement("div");
if (x==false) {
var divContent = document.createTextNode("sorry, you're offline");
divContent.className="offline:last-child";
div.appendChild(divContent);
var k = document.body.appendChild(div);
} else {
var divContent = document.createTextNode("you are online");
divContent.className="online:last-child";
div.appendChild(divContent);
var k = document.body.appendChild(div);
}
这里我使用 .className
使用 last-child
伪类更改最后一个单词的样式(因此只有离线和在线样式)。我猜我的js代码中的类命名有问题。
在采用这种方法之前,我使用了 setAttribute,但我几乎不知道如何使用伪类来使用它。我应该使用什么类名(和/或代码)?
最佳答案
首先,您不能将类分配给文本节点,而只能分配给元素。将在线或离线类分配给 div,而不是其文本内容。
其次,您不能直接分配像 :last-child
这样的伪类。 CSS 中具有此类伪类的选择器用于定位 DOM 树中其父级的最后一个子级的元素。
关于javascript - createElement 和伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18172634/