选择符和继承 子选择符 示例 body>p {
color: #fff;
} 描述 子选择符选择指定元素的所有直接子元素. 在上述示例中, body 为父元素, p 为子元素. 支持 Bugs 在 IE7 中, 如果在父子元素间有其它元素, 该选择符无效.
链类 (chained classes)
示例 .class1.class2.class3 {
background: #fff;
} 描述 同一HTML元素声明了多个类时会使用此类, 如: <div class="class1 class2 class3">
<p>Content here.</p>
</div> 支持 Bugs IE6 好像支持此属性, 因为它将链中的最后一个类匹配给了有该类的元素, 然而它并没有像其应该表现的那样,将类限制到有链中所有类的元素. 属性选择符
示例 a[href] {
color: #0f0;
} 描述 该选择符的目标元素为有指定属性的元素. 在上述示例中, 所有有 href 属性的锚标签都能满足, 但没有 href 属性的标签都不会被满足. 支持 相邻兄弟选择符 示例 h1+p {
color: #f00;
} 描述 该选择符的目标为邻近指定元素的兄弟元素. 上述示例的目标为所有紧随 h1 的段落标签, 举例如下: <h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p> 在上述代码中, 指定的 CSS 只会作用于第一个段落, 因为它是 <h1> 的邻近的兄弟标签. 第二个标签也是兄弟标签, 但不是邻近的. 支持 Bugs 在 IE7 中, 若兄弟标签间有 HTML 注释, 则该选择符不会起作用. 一般兄弟选择符 示例 h1~p {
color: #f00;
} 描述 该选择符的目标为指定元素后的所有兄弟元素. 在前面的示例中应用该选择符会选中所有两个段落标签, 但 h1 标签之前的段落将不会适用此选择符. 支持 伪类和伪元素 :hover 伪类后的子选择符 示例 a:hover span {
color: #0f0;
} 描述 在 :hover 伪类后也可将选择符作用到元素, 和所有子选择符的工作原理类似. 上述示例将会在鼠标悬停于锚上时改变所有 <span> 元素里的字体的颜色. 支持 链式伪类 示例 a:first-child:hover {
color: #0f0;
} 描述 伪类可成链使用以收缩选择范围. 上述示例的目标为每个为长子的锚标签, 对其应用 hover 类. 支持 非锚元素的 :hover 示例 div:hover {
color: #f00;
} 描述 :hover 可用于悬停或滚过状态, 且可用于任何元素. 支持 :first-child 伪类 示例 div li:first-child {
background: blue;
} 描述 此伪类的目标为指定元素的所有第一个子元素. 支持 Bugs 在 IE7 中, 若第一子元素前有 HTML 注释, 则该伪类不起作用. :focus 伪类 示例 a:focus {
border: solid 1px red;
} 描述 该伪类的目标为任何被聚焦到的元素. 支持 :before 和 :after 伪元素 示例 #box:before {
content: "This text is before the box";
}
#box:after {
content: "This text is after the box";
} 描述 该伪元素和 content 属性联合使用, 会将产生的内容放置到指定的元素之前或之后. 支持 属性支持 位置决定的虚拟维数 示例 #box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
} 描述 给绝对定位的元素指定上, 右, 下, 左的值将赋予元素 "虚拟" 维数 (宽度和高度), 即便宽度和高度并未指定. 支持 Min-Height 和 Min-Width 示例 #box {
min-height: 500px;
min-width: 300px;
} 描述 这些属性指定了高度或宽度的最小值, 允许盒子更大, 但不可以比指定的最小值再小. 可将二属性结合使用或分别使用. 支持 Max-Height 和 Max-Width 示例 #box {
max-height: 500px;
max-width: 300px;
} 描述 这些属性指定了高度或宽度的最大值, 允许盒子更小, 但不可以比指定的最大值再大. 可将二属性结合使用或分别使用. 支持 透明边框颜色 示例 #box {
border: solid 1px transparent;
} 描述 透明边框颜色允许边框占用和可见时同样的空间. 支持 位置固定元素 示例 #box {
position: fixed;
} 描述 position 属性的这个值允许将元素相对于基准点绝对定位. 支持 相对于基准点对背景进行绝对定位 示例 #box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
} 描述 background-attachment 属属的 fixed 值允许背景图片相对于基点绝对定位. 支持 Bugs 该属性在 IE6 仅适用于根元素. 属性值 “inherit” 示例 #box {
display: inherit;
} 描述 将 inherit 应用到属性上允许元素继承其上级元素该属性的值. 支持 Bugs IE6 和 IE7 不支持该值, 除非将该值应用到 direction 和 visibility 属性. 表格单元格边框间的空间
示例 table td {
border-spacing: 3px;
} 描述 该属性设定了表格相邻单元格边框之间的空间. 支持 表格中空单元格的显示方式 示例 table {
empty-cells: show;
} 描述 该属性只能作用于将 display 属性设为 table-cell 的元素, 允许空单元格要么带边框和背景显示, 要么全都隐藏. 支持 表格标题的垂直位置 示例 table {
caption-side: bottom;
} 描述 该属性允许表格标题在表格底部, 而非顶部(缺省值), 显示. 支持 区域裁剪 示例 #box {
clip: rect(20px, 300px, 200px, 100px)
} 描述 该属性指定了盒子中的可见区域, 其余区域将会被 "裁剪掉", 也就是不可见. 支持 Bugs 该属性在 IE6 和 IE7 中不使用逗号时起作用. Orphaned and Widowed Text in Printed Pages 示例 p {
orphans: 4;
}
p {
widows: 4;
} 描述 The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page. 支持 Page Breaks Inside Boxes 示例 #box {
page-break-inside: avoid;
} 描述 This property specifies whether a page break should occur inside of a specified element or not. 支持 Outline Properties 示例 #box {
outline: solid 1px red;
} 描述 outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues. 支持 Alternative Values for the Display Property 示例 #box {
display: inline-block;
} 描述 display 通常被设为 block, inline, 或 none. 其它的可用值包括: - inline-block
- inline-table
- list-item
- run-in
- table
- table-caption
- table-cell
- table-column
- table-column-group
- table-footer-group
- table-header-group
- table-row
- table-row-group
支持 Handling of Collapsible Whitespace 示例 p {
white-space: pre-line;
}
div {
white-space: pre-wrap;
} 描述 The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks. 支持 Other Miscellaneous Techniques Media Types for @import 示例 @import url("styles.css") screen; 描述 A media type for an imported style sheet is declared after the location of the style sheet, as 在上述示例中. In this example, the media type is "screen". 支持 Bugs Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored. Incrementing of Counter Values 示例 h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
} 描述 This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element. 支持 Quote Characters for Generated Content 示例 q {
quotes: "'" "'";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
} 描述 Specifies the quote characters to use for generated content applied to the q (quotation) tag. 支持 重要 Bug 和不兼容特性 下面是各种发生于 IE6 和 IE7 但前面未作描述的 bug 的简单描述. 此列表不包含对三种浏览器都缺乏支持的项目. IE6 Bugs - 不支持 <abbr>元素的样式
- 不支持以 - 或 _ 开头的 class 和 ID
- <select> 总显示在最顶部, z-index 值不起作用
- :hover 伪类会被忽略 if anchor 伪类es are not in the correct order (:link, :visited, :hover)
- An !important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn't use !important
- height behaves like min-height
- width behaves like min-width
- Left and right margins are doubled on floated elements that touch their parents' side edges
- Dotted borders appear identical to dashed borders
- line-through value for text-decoration property appears higher on the text than on other browsers
- List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
- List items don't support all possible values for list-style-type
- List items with a specified list-style-image will not display the image if they are floated
- Offers only partial support for @font-face
- Some selectors will wrongly match comments and the doctype declaration
- If an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched
IE7 Bugs - List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
- List items don't support all possible values for list-style-type
- List items with a specified list-style-image will not display the image if they are floated
- Offers only partial support for @font-face
- Some selectors will wrongly match comments and the doctype declaration
一些这里没有提到的其它 bug, 不一定是 bug. 请参阅相关文档.
|
