Question

我认为我发现了chrome和opera中的一个错误，并希望在文档仍在加载时使css选择器section:last-of-type正常工作。该错误仅在文档仍在加载时出现：这是NodeJS中用于公开错误的最小示例：

当文档仍在加载时，最后一个类型不匹配会发生什么。在IE中匹配，然后匹配两次，然后在加载时再次正确匹配。它在Firefox中运行良好。

最后的-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}`);

同时加载全部工作就好了。它确认语法是正确的。

最后的型的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>

任何提示都将不胜感激。

Answer 1

可能的解决方法是在页面加载时使用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指令。

最后类型的CSS在加载时不匹配

1 个答案: