Internet Explorer 7 的新 CSS 命令
4.39/5 (8投票s)
2007年1月14日
4分钟阅读
55075
Internet Explorer 7 现在支持许多新的 CSS 命令 - 了解这些命令是什么以及如何使用它们。
现在有少数新的CSS命令可供 Internet Explorer 7 使用。好吧，它们也不是真的新——大多数其他浏览器很早就支持它们了，而IE才刚刚赶上。这些新命令基本上让您可以更好地控制HTML元素，并在许多情况下**无需使用类**或 ID。
一次IE6 过时了，您将能够使用本文概述的命令。实际上，这并不完全正确——前提是您的网站不依赖于这些命令，并且在IE6 及更早版本中仍然可读，那么使用它们就没有问题。
子选择器
尽管 Internet Explorer 6 不支持CSS子选择器，但它实际上被广泛用作隐藏CSS命令的方法。现在这不再可能，因为IE7 现在理解子选择器。那么，什么是子选择器？嗯，想象一下下面的HTML结构
<div><p><span>Text goes here</span></p></div>
在上面的例子中，<p> 是 <div> 的子元素，而 <span> 是 <div> 的孙子元素。我们可以使用以下方法将 <span> 中的文本设为红色：CSS规则
div span {color: red;}
这基本上意味着 <span> 的内容将是红色的，前提是 <span> 嵌套在 <div> 中。该 <span> 可以是 <div> 的子元素、孙子元素、曾孙元素等。
然而，如果我们使用以下方法：CSScode
div>span {color: red;}
……那么我们 <span> 中的文本将不会变成红色。这是因为我们在 div 和 span 之间插入了子选择器（大于号），这基本上意味着我们的**span 必须是 div 的子元素**。在上面的例子中，<span> 是 <div> 的孙子元素。
因此，通过使用子选择器，我们可以**为任何是另一个元素子元素（而不是孙子元素）的 HTML 元素分配规则**。举个例子，假设我们想为 body 中的第一个 <div> 分配一个顶部边距，而不是为其他 <div> 分配。没有子选择器，我们将被迫为此 <div> 分配一个类或 ID，并在我们的CSS命令中引用该类或 ID。但现在，我们可以引用这个 <div>，而且只有这个 <div>，而无需通过CSS:
body>div {margin-top: 10px;}
使用子选择器从IE
隐藏命令。从历史上看，子选择器一直被用来隐藏CSS命令从IE。只需**在任何 CSS 命令前面加上 html>body**IE它将被忽略
html>body .foo {CSS commands go here;}
。这是因为 <body> 始终是 <html> 的子元素——当然，它永远不可能是 <html> 的孙子或曾孙。
现在IE7 理解子选择器，您必须在大于号后面直接插入一个空注释标记。IE那么 7 就不会理解这个选择器（谁知道为什么！？），因此会完全忽略这个CSScommand
html>/**/body .foo {CSS commands go here;}
相邻选择器
相邻选择器是另一个非常有用的CSS选择器，直到现在 Internet Explorer 都不理解。幸运的是，IE7 现在理解它。相邻选择器基本上允许您**引用紧邻另一个元素的 HTML 元素**。
blockquote+p {margin-top: 0;}
上面的CSS代码基本上说，任何后面跟着引用文本的段落都不应该有顶部边距。这很有用，因为您可能总是希望在引用后的段落中引用引用者，并且可能希望删除段落和引用之间的间距。
另一个使用相邻选择器的绝佳示例是**水平列表**。通常，您可能希望以与列表中其他项略有不同的方式格式化第一项。因此，如果您想为除第一项之外的每个导航项分配左边框，您可以使用此CSScode
li+li {border-left: 1px solid black;}
这基本上意味着任何跟在另一个 <li> 后面的 <li>（即除了第一个之外的所有 <li>）都应该有一个左边框。
first-child 伪类
虽然仍有许多伪类IE7 不理解，但 first-child 伪类是它现在支持的一个。同样，这是个好消息，因为它允许我们在任何给定部分**以不同的方式格式化第一个 HTML 元素**，而无需为其分配类或 ID。因此，例如，假设您希望内容区域的第一个段落永远没有顶部边距，您可以使用此CSScommand
#content p:first-child {margin-top: 0;}
结论
就和CSS相比，Internet Explorer 7 肯定是一个改进。CSS修复了大量错误，并且IE7 现在支持更多CSS命令。但仍有很长的路要走，并且仍然存在大量CSS命令IE仍然不理解——希望它能很快赶上！