用于 IE 7的新CSS命令

分享于 

6分钟阅读

Web开发

  繁體 雙語

现在有一些新的CSS命令可以用于 IE 7. 它们不是很新的- 大多数它的他浏览器已经支持了很长时间,而 IE 只是在捕捉。 这些新命令基本上让你对HTML元素和有更多的控制,避免了在许多实例中使用或者ids的需要。

一旦IE6过时,你就可以使用本文中列出的命令了。 实际上,这不是严格的true - 如果你的网站不依赖这些命令,并且在is之前没有问题。

子选择器

尽管 IE 6不支持CSS子选择器,但实际上它被用作隐藏 IE 命令的一种方法。 这不再是可能的,因为IE7现在理解子选择器。 那么子选择器是什么? 那么,假设下面的HTML结构:

<div><p><span>Text goeshere</span></p></div>

在 上面 示例中,<p><div>的子级,<span><div>的一个孙。 我们可以使用以下CSS规则使 <span> 红色中的文本成为:

divspan {color: red;}

这基本上意味着 <span>的内容是红色的,只要 <span> 嵌套在 <div> 中。 <span> 可以是孩子,孙子,伟大的<div> 等等。

如果我们使用下面的CSS代码:

div>span {color: red;}

。我们 <span> 里的文字就不会变成红色。 因为我们在 divspan ( 大于符号) 之间插入子选择器,这基本上意味着我们的 span 必须是 div 数据库的子级。 在 上面 示例中,<span><div>的一个孙子。

因此,使用子选择器,我们可以向其他元素的子( 而不是孙子) 中的任何HTML元素分配规则。 例如,假设我们希望将顶级 margin 分配给 body 中的第一个 <div>,但不是对它的他人来说。 如果没有子选择器,我们将被迫为这个 <div> 指定一个类或者 id,并在我们的CSS命令中引用这个类或者 id。 尽管现在我们可以引用这个 <div>,而只引用这个 <div>,但不需要通过CSS进行类或者标识:

body>div {margin-top: 10px;}

使用子选择器隐藏 IE 中的命令

过去,子选择器已经被用来隐藏来自 IE的CSS命令。 只要将放在任何CSS命令 IE 前面即可忽略它:

html>body. foo {CSScommandsgo here;}

因为 <body> 总是 <html>的孩子,所以它当然不是 <html>的孙子或者 great。

现在已经了解了子选择器,你必须在 GREATER 之后直接在中插入空注释标记。 IE7将不理解这里选择器( 谁知道呢),因此将完全忽略这里CSS命令:? !

html>/**/body. foo {CSScommandsgo here;}

相邻选择器

相邻选择器是另一个非常有用的CSS选择器,直到现在 IE 还没有理解。 幸运的是,IE7确实理解它。 相邻选择器基本上允许你对一个与另一个元素相邻的HTML元素收费:

blockquote+p {margin-top: 0;}

上面 CSS代码基本上说,前面引用的任何段落都不应该有顶部 margin。 这是有用的,因为你可以能总是希望引用在报价之后的段落,并可以能要消除段落和引用。

另一个很好的例子,当你使用相邻的选择器的时候,你可以用的水平列表。 通常,你可能希望将第一项的格式与列表中的其他项稍微不同。 因此,如果你想为每个导航项指定左边框,除了第一个以外,则可以使用以下CSS代码:

li+li {border-left: 1px solid black;}

这基本上意味着任何跟随它的他 <li><li> ( 例如。 除了第一个以外,所有的都应该有左边的边框。

第一个子类

尽管仍然有很多伪类,但是IE7不理解,第一个子类是它现在支持的一个类。 同样,这是个好消息,因为在任何给定的一段中,我们都可以对第一个HTML元素进行不同的格式化,而不必在。 例如假设你希望内容区域中的第一个段落永远没有顶级 margin,你可以使用以下CSS命令:

#contentp:first-child {margin-top: 0;}

结束语

IE 7在 IE 6上的改进当然是对CSS的改进。 已经有大量的CSS Bug 被固定了,IE7现在支持更多的CSS命令。 虽然仍然有很长的方法,但仍然有大量的CSS命令,IE 仍然不能理解。


COM  INT  COMM  EXP  Comma  Intern  
相关文章