CSS3 语法以及优化

来源：互联网发布：教学软件编辑：程序博客网时间：2024/06/04 08:31

属性选择器

1.E[foo^="bar"]：选择匹配E的元素，前匹配。例如：body[lang^="en"] 匹配<body lang="en-us" />，而不匹配<body lang="fr-argot">

2.E[foo$="bar"]：选择匹配E的元素，后匹配。例如：img[src$="jpg"] 匹配<img src="pic.jpg" />，而不匹配<img src="pic.gif" />

3.E[foo*="bar"]：选择匹配E的元素，匹配任意字符。

注：E可省略，表示可匹配任意类型的元素。

结构伪类选择器是CSS3新增的类型选择器。

1.E:root：选择匹配E所在文档的根元素。

2.E:nth-child(n)：选择所有在其父元素中第n个位置的匹配E的子元素。

例如：

tr:nth-child(3)匹配所有表格里排第3行的tr元

tr:nth-child(2n+1)匹配所有奇数行

tr:nth-child(2n)匹配所有偶数航

tr:nth-child(even)匹配奇数行，或odd（偶数行）

3.E:nth-last-child(n)：选择所有在其父元素中倒数第n个位置的匹配E的子元素，与上2语法相似。

4.E:nth-of-type(n)：选择父元素中第n个元素，且匹配E的子元素。

例如：

p:nth-of-type(2)匹配<div><h1></h1><p></p><p></p></div>匹配后一个p元素

5.E:nth-last-of-type(n)：选择父元素中倒数第n个位置，且匹配E的元素

6.E:last-child：选择位于父元素中最后一个位置，且匹配E的子元素。

例如：

h1:last-child匹配<div><p></p><h1></h1></div>片段中的h1元素

7.E:first-of-type：选择在其父元素中匹配E的第一个同类型的子元素。

例如：

p:first-of-type匹配<div><h1></h1><p></p><p></p></div>片段中的第一个p元素

8.E:last-oftype：

9.E:only-child：选择父元素中只包含一个子元素，且该元素匹配E

10.E:only-of-type：选择其父元素只包含一个同类型的子元素，且该元素匹配E。

11.E:empty：选择匹配E的元素，且该元素不包含子节点。注意：文本也属于节点。

CSS3新增的选择器

E:enabled：选择匹配E的所有可用UI元素。注意：在网页中，UI元素一般是指包含在form元素内的表单元素

E:disabled：

E:checked：

例子：

input:enabled匹配<form><input type="text" /><input type="button" disabled"disabled" /></form>片段中的文本框，但不匹配button

table {
table-layout:fixed;// 改善表格呈现性能
empty-cells:show;// 隐藏不必要的干扰因素
border-collapse:collapse;// 让表格看起来更精致
}

li {
float:left;
width:36px;
padding:0 0 4px 0;
text-align:center;
// 浮动显示列表项，该方法比较灵活，但也容易出现错位和排列不整齐的问题。

// 解决的方法就是：固定外框和项目的宽度
}