html - 在 IE9+ 中定位元素属性

Question

我需要定位具有此属性的 h1 标签:style=color:#230870 并应用文本阴影。它工作得很好，当然除了在 IE 中。我发现的示例代码似乎可以工作，但我的代码使用的是“#”，在 IE 中它呈现为:style="color: rgb(35, 8, 112); 在 H1 中.

Here is my code on CodePen

#mydiv h1[style*=red] {
    text-shadow: 2px 2px 5px #443E55;
}
#mydiv h2[style*=70] {
    text-shadow: 2px 2px 1px #ffcc00;
}
#mydiv h2[style*=rgb] {
    text-shadow: 2px 2px 1px #ffcc00;
}

<div id="mydiv">
	<h1>THIS IS A REGULAR H1 TAG</h1>
	<h1 style="color:red">THIS IS H1 WITH "red" AS IT'S ATTRIBUTE VALUE AND A DROP SHADOW</h1>
	<h1 style="color:#230870">THIS H1 WITH BLUE #230870 CSS ATTRIBUE VALUE WITH A DROP SHADOW</h1>
  <h1 style="color: rgb(35, 8, 112);">THIS H1 WITH BLUE #230870 BUT IE RENDERS THE ATTRIBUTE as: 'style="color: rgb(35, 8, 112)'</h1>
  
</div>

我做错了什么？

Answer 1

由于每个页面只有一个 h1，您可以使用更简单的选择器，因此无需过度指定它。这应该可以满足您的需求:

h1 {
   border:1px solid red; 
   text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);
}