使用<style>标签在<body>与其他HTML

<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

一个浏览器应该如何渲染css是不连续的?它是否应该生成一些数据结构，使用页面上所有的css样式，并使用它进行渲染?

还是按照看到的顺序使用样式信息进行渲染?

当前回答

我认为，在现代浏览器中，你只需付出一点努力，就可以获得完全合法的“作用域样式”。考虑下面的HTML文档:

<!doctype html>
<html>
    <head>
    </head>
    <style>p{background:red}</style>
    <body>
        <template>
            <style>p{background:green}</style>
            <p>I am green</p>
        </template>
        <p>I am red!</p>
        <script>
         document.querySelectorAll('template').forEach((template)=>{
             const div = document.createElement('div');
             div.remove(); // detach div from document
             let shadow = div.attachShadow({mode:'open'});
             shadow.replaceChildren(template.content);
             template.replaceWith(div);
         });
        </script>
    </body>
</html>

我使用了一个模板来封装HTML，我想包含自己的样式元素，不影响模板之外的任何HTML。当然，默认情况下，在呈现期间忽略模板。JavaScript代码

查找文档中的每个模板创建一个分离的空div 赋予div一个“阴影根”(本地化样式的关键) 将模板内容复制到影子根目录用包含相同内容的div替换原来的模板(除了在阴影根)

几乎所有HTML内容(包括样式)在模板中都是合法的。

使用最新的Chrome/Firefox/Edge测试。给我一个免费的MacBook Pro，我会用Safari进行测试!: -)

2022-09-15 08:33:56

其他回答

我认为，在现代浏览器中，你只需付出一点努力，就可以获得完全合法的“作用域样式”。考虑下面的HTML文档:

<!doctype html>
<html>
    <head>
    </head>
    <style>p{background:red}</style>
    <body>
        <template>
            <style>p{background:green}</style>
            <p>I am green</p>
        </template>
        <p>I am red!</p>
        <script>
         document.querySelectorAll('template').forEach((template)=>{
             const div = document.createElement('div');
             div.remove(); // detach div from document
             let shadow = div.attachShadow({mode:'open'});
             shadow.replaceChildren(template.content);
             template.replaceWith(div);
         });
        </script>
    </body>
</html>

我使用了一个模板来封装HTML，我想包含自己的样式元素，不影响模板之外的任何HTML。当然，默认情况下，在呈现期间忽略模板。JavaScript代码

几乎所有HTML内容(包括样式)在模板中都是合法的。

使用最新的Chrome/Firefox/Edge测试。给我一个免费的MacBook Pro，我会用Safari进行测试!: -)

2022-09-15 08:33:56

参考资料:W3C Specs和W3Schools

2010-05-13 21:05:18

我想这将因浏览器的不同而有所不同:全局显示规则可能会随着浏览器运行代码而更新。

当外部样式表加载延迟时，有时可以在全局显示规则中看到此类更改。类似的事情也可能发生在这里，但在如此短的连续时间内，它实际上没有被渲染。

无论如何，它都不是有效的HTML，所以我认为考虑它是徒劳的。<style>标签属于页面的头部部分。

2010-05-13 21:05:41

在您的示例中，浏览器“不应该”做任何事情。HTML无效。要么触发错误恢复，要么解析器自行处理。

在有效实例中，多个样式表被视为一个接一个出现，级联计算正常。