gpt4 book ai didi

javascript - 在样式元素上使用 title 属性时出现问题

转载 作者:行者123 更新时间:2023-12-02 18:42:24 25 4
gpt4 key购买 nike

最近我遇到一个很奇怪的问题。当您添加多个样式元素时,并且如果您在样式元素上添加标题属性,并在标题中分配不同的值。仅应用第一个样式元素 css。

 <!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>

<style title="Id-1">
h1{color:red}
</style>

<style title="Id-2">
h2{color:blue}
</style>

</head>

<body>
<h1>Hello Red Heading!</h1>
<h2>Hello Blue Heading!</h2>
</body>
</html>

现在,如果您看到上面简单的 HTML 代码。以下是此代码工作的可能性 -

  1. 当未添加标题属性时 - 它有效。
  2. 当添加相同值或不添加任何值的标题属性时 - 有效。
  3. 当我们在 title 属性中分配不同的值(如代码所示)时,仅应用第一个样式元素 css,即 h1 变为红色,但对 h2 没有影响。

解决方案是使用data-将标题标记为自定义属性或数据属性。我更想知道这种行为背后的原因是什么。

要查看它的实际效果,我创建了一个 plunkr,您可以访问 here

最佳答案

因为title<style>用于提供不同的样式子集。 Documentation

所以基本上会去View > Page Style你会看到id-1id-2 :

enter image description here


From documentation :

文档中的任何样式表都属于以下类别之一:

Persistent (no rel="alternate", no title=""): always applies to the document.Preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected. There can only be one preferred stylesheet, so providing stylesheets with different title attributes will cause some of them to be ignored.
Alternate (rel="alternate stylesheet", title="..." must be specified): disabled by default, can be selected.

关于javascript - 在样式元素上使用 title 属性时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67832332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com