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

Question

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

Wal*_*ril 6 html css opera internet-explorer google-chrome

我想我发现了chrome和opera中的一个bug,想要一个解决方案,让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}`);

Run Code Online (Sandbox Code Playgroud)

同时加载全部工作正常.它确认语法是正确的.

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

Run Code Online (Sandbox Code Playgroud)

任何提示将不胜感激.

Answer 1

pix*_*ix4 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}`);

Run Code Online (Sandbox Code Playgroud)

观察者必须连接在<bod>标签之后。否则document.body就是null。

我将 css 选择器放在section:not(:last-of-type)正匹配之前，以避免使用!important指令。

归档时间：	7 年，9 月前
查看次数：	258 次
最近记录：	7 年，9 月前