Question

我正在测试一些css并且发现浏览器（Chrome，firefox）不会显示我指定的内容之后的::。 Fiddler节目是正确的，但浏览器不会。

HTML：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="assets/test.css">
    </head>
    <body>
        <div id="testdiv">
            <main>
                <section>
                    <p>
                        I want to put number '123' here: 
                    </p>
                    <p>
                        And I want it here too: 
                    </p>
                </section>
            </main>
        </div>
    </body>
</html>

CSS：

#testdiv main p { margin: 0; font-size: 1.5em; font-weight: 700;}
#testdiv main p + p { font-size: 1.0em; font-weight: 300;} 
#testdiv main p::after { content:'123'; }

小提琴:(显示正确） https://jsfiddle.net/bg1tg8nc/

任何帮助表示感谢。

Answer 1

HA我想出了如何解决这个问题！

如果您使用上面的CSS代码并按照以下方式重新排序：

System.out.print()

它工作正常。

任何人都可以解释原因吗？

浏览器未使用::

1 个答案: