最近我遇到一个很奇怪的问题。当您添加多个样式元素时，并且如果您在样式元素上添加标题属性，并在标题中分配不同的值。仅应用第一个样式元素 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 代码。以下是此代码工作的可能性 -
- 当未添加标题属性时 - 它有效。
- 当添加相同值或不添加任何值的标题属性时 - 有效。
- 当我们在 title 属性中分配不同的值(如代码所示)时，仅应用第一个样式元素 css，即 h1 变为红色，但对 h2 没有影响。
解决方案是使用data-将标题标记为自定义属性或数据属性。 我更想知道这种行为背后的原因是什么。
要查看它的实际效果，我创建了一个 plunkr，您可以访问 here
最佳答案
因为title上<style>用于提供不同的样式子集。 Documentation
所以基本上会去View > Page Style你会看到id-1和id-2 :
文档中的任何样式表都属于以下类别之一:
Persistent (no
rel="alternate", notitle=""): always applies to the document. Preferred (norel="alternate", withtitle="..."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/