类型的最后一个CSS在仍然加载时不匹配。
类型的最后一个CSS在仍然加载时不匹配。
提问于 2018-03-27 14:31:01
我想我在chrome和opera中发现了一个bug，并希望找到一个解决方案，使css选择器section:last-of-type在文档仍在加载时工作。该bug仅在文档仍在加载时出现:下面是NodeJS中的一个最小示例，用于公开该bug：
所发生的情况是，在文档仍在加载时，最后类型不匹配。在IE中，它匹配，然后匹配两次，然后在加载时再次正确匹配。它在Firefox中运行得很好。
last-of-type.js
"use strict";
const http = require(`http`);
const PORT = 8080;
const htmlStart = `<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>html streaming</title>
<meta name="viewport" content="width=device-width">
<style>
section {
position: absolute;
left: 0;
right: 0;
}
section:last-of-type {
animation: comin 1.4s ease 0s;
left: 0;
opacity: 1;
}
@keyframes comin {
0% {
left: 100%;
}
100% {
left: 0;
}
}
section:not(:last-of-type) {
animation: comout 1.4s ease 0s;
left: -100%;
opacity: 0;
}
@keyframes comout {
0% {
left: 0;
opacity: 1;
}
100% {
left: -100%;
opacity: 0;
}
}
</style>
<script>
var headLoaded = Date.now();
document.addEventListener("DOMContentLoaded", function() {
console.log((Date.now() - headLoaded) / 1000);
});
</script>
</head>
<body>
<h1>last-of-type test</h1>
<section>
<h2>First slide</h2>
<p>Some text 111111111</p>
</section>
<section>
<h2>2</h2>
<p>22222222222222</p>
</section>
`;
const htmlEnd = `
<p>html finised loading</p>
</body></html>`;
const INTERVAL = 8000; // ms
const server = http.createServer((request, response) => {
response.setHeader(`Content-Type`, `text/html`);
response.writeHead(200);
response.write(htmlStart);
setTimeout(function () {
response.write(`<section>
<h2>3</h2>
<p>33333333333</p>
</section>`);
}, INTERVAL);
setTimeout(function () {
response.end(htmlEnd);
}, 3 * INTERVAL);
});
server.listen(PORT);
console.log(`Listening on ${PORT}`);同样的负载一次就能正常工作。它确认语法是正确的。
last-of-type-test.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>html streaming</title>
<meta name="viewport" content="width=device-width">
<style>
section {
position: absolute;
left: 0;
right: 0;
}
section:last-of-type {
animation: comin 1.4s ease 0s;
left: 0;
opacity: 1;
}
@keyframes comin {
0% {
left: 100%;
}
100% {
left: 0;
}
}
section:not(:last-of-type) {
animation: comout 1.4s ease 0s;
left: -100%;
opacity: 0;
}
@keyframes comout {
0% {
left: 0;
opacity: 1;
}
100% {
left: -100%;
opacity: 0;
}
}
</style>
<script>
var headLoaded = Date.now();
document.addEventListener("DOMContentLoaded", function() {
console.log((Date.now() - headLoaded) / 1000);
});
</script>
</head>
<body>
<h1>last-of-type test</h1>
<section>
<h2>First slide</h2>
<p>some text</p>
</section>
<section>
<h2>2</h2>
<p>22222222222222</p>
</section>
<section>
<h2>3</h2>
<p>33333333333</p>
</section>
</body></html>如有任何提示，将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-09 08:22:58
一个可能的解决办法是在页面加载时使用MutationObserver。在这里，您可以获得section所有元素的列表，并为最后一个元素提供一个特殊的last类。每个dom更改都会调用MutationObserver，即使页面仍在加载。加载页面时，可以删除此观察者。
"use strict";
const http = require(`http`);
const PORT = 8080;
const htmlStart = `<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>html streaming</title>
<meta name="viewport" content="width=device-width">
<style>
section {
position: absolute;
left: 0;
right: 0;
}
section:not(:last-of-type) {
animation: comout 1.4s ease 0s;
left: -100%;
opacity: 0;
}
section:last-of-type, section.last {
animation: comin 1.4s ease 0s;
left: 0;
opacity: 1;
}
@keyframes comin {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@keyframes comout {
0% {
left: 0;
opacity: 1;
}
100% {
left: -100%;
opacity: 0;
}
}
</style>
<script>
var observer = new MutationObserver(function() {
var list = document.querySelectorAll("section");
if (list.length === 0) return;
for (var i = 0; i < list.length; i++) {
list[i].classList.remove("last");
}
list[list.length - 1].classList.add("last");
});
var headLoaded = Date.now();
document.addEventListener("DOMContentLoaded", function() {
console.log((Date.now() - headLoaded) / 1000);
observer.disconnect();
var list = document.querySelectorAll("section");
for (var i = 0; i < list.length; i++) {
list[i].classList.remove("last");
}
});
</script>
</head>
<body>
<script>
observer.observe(document.body, { attributes: true, childList: true })
</script>
<h1>last-of-type test</h1>
<section>
<h2>First slide</h2>
<p>Some text 111111111</p>
</section>
<section>
<h2>2</h2>
<p>22222222222222</p>
</section>
`;
const htmlEnd = `
<p>html finised loading</p>
</body></html>`;
const INTERVAL = 8000; // ms
const server = http.createServer((request, response) => {
response.setHeader(`Content-Type`, `text/html`);
response.writeHead(200);
response.write(htmlStart);
setTimeout(function () {
response.write(`<section>
<h2>3</h2>
<p>33333333333</p>
</section>`);
}, INTERVAL);
setTimeout(function () {
response.end(htmlEnd);
}, 3 * INTERVAL);
});
server.listen(PORT);
console.log(`Listening on ${PORT}`);观察者必须在<bod>标记之后连接。否则，document.body就是null。
我将css选择器section:not(:last-of-type)放在正匹配之前，以避免使用!important指令。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49515634
复制相关文章
相似问题
腾讯云开发者
