第二章：CSS3新增的选择器
CSS1定义的选择器
| 选择器 | 类型 | 说明 |
|---|---|---|
| E | 类型选择器 | 选择指定类型的元素 |
| #myid | ID选择器 | 选择id为myid的元素 |
| .myclass | 类选择器 | 选择类为myclass的元素 |
| E F | 包含选择器 | 选择包含在E内的F元素，E和F可以是任意合法的选择符组合 |
| E:link | 链接伪类选择器 | a链接未被访问 |
| E:visited | 链接伪类选择器 | a链接已被访问 |
| E:active | 用户操作伪类选择器 | a链接被激活时 |
| E:hover | 用户操作伪类选择器 | 匹配元素正在被鼠标经过 |
| E:focus | 用户操作伪类选择器 | 匹配元素获取焦点 |
| E::first-line | 伪元素选择器 | E元素内的第一行文本 |
| E::first-letter | 伪元素选择器 | E元素内的第一个字符 |
CSS2定义的选择器
| 选择器 | 类型 | 说明 |
|---|---|---|
| * | 通配选择器 | 选择文档内所有元素 |
| E[foo] | 属性选择器 | 选择定义了foo属性的E，E可省略 |
| E[foo=“bar”] | 属性选择器 | 选择foo属性的属性值为bar的E，E可省略 |
| E[foo~=“bar”] | 属性选择器 | 选择以空格隔开的其中一个为bar的元素，例如匹配a[title~=“bar”]匹配<a title="bar bar1"></a>不匹配<a title="bar1 bar2"></a> |
| E[foo|=“en”] | 属性选择器 | 元素定义了foo属性且foo属性值是用-分割的列表，值开头的字符为"en",[lang|=“en”]匹配<body lang="en-us"></body>不匹配<body lang="fr-argot"></body> |
| E:first-child | 结构伪类选择器 | 选择匹配E的元素，且该元素为父元素的第一个子元素 |
| E:lang(fr) | :lang()伪类选择器 | 选择匹配E元素且该元素显示内容的语言类型为fr |
| E::before | 伪元素选择器 | 匹配E的元素前面插入内容 |
| E::after | 伪元素选择器 | 匹配E的元素后面插入内容 |
| E > F | 子包含选择器 | 选择匹配F元素且该元素为E的第1级子类 |
| E + F | 相邻兄弟选择器 | 选择匹配F元素且该元素位于E的元素后面相邻的位置 |
CSS3新增的属性选择器列表
| 选择器 | 说明 |
|---|---|
| E[foo^=“bar”] | 匹配foo属性的值包含前缀为bar的元素 |
| E[foo$=“bar”] | 匹配foo属性的值包含后缀为bar的元素 |
| E[foo*=“bar”] | 匹配foo属性的值包含为bar的元素 |
- 2.1实战：文档共享的友善之举
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超级链接类型标识图标</title>
<style type="text/css">
p{
margin:4px;
}
/*匹配所有herf以http://开头的元素*/
a[href^="http://"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
padding-left: 18px;
background-position:-192px -1387px;
}
a[href$="pdf"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
padding-left: 18px;
background-position:-192px -1071px;
}
a[href$="ppt"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
background-position:-192px -1133px;
padding-left: 18px;
}
a[href$="xls"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
padding-left: 18px;
background-position:-192px -1239px;
}
a[href$="gif"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
padding-left: 18px;
background-position:-192px -1220px;
}
a[href$="jpg"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
padding-left: 18px;
background-position:-192px -1220px;
}
a[href$="png"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
padding-left: 18px;
background-position:-192px -1220px;
}
a[href$="txt"]{
background: url(http://wkstatic.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_e74787b.png) no-repeat left center;
background-position:-193px -1177px;
padding-left: 18px;
}
</style>
</head>
<body>
<h1>超级链接类型标识图标</h1>
<p><a href="http://www.baidu.com/name.pdf">pdf文件</a></p>
<p><a href="http://www.baidu.com/name.ppt">ppt文件</a></p>
<p><a href="http://www.baidu.com/name.xls">xls文件</a></p>
<p><a href="http://www.baidu.com/name.gif">gif文件</a></p>
<p><a href="http://www.baidu.com/name.jpg">jpg文件</a></p>
<p><a href="http://www.baidu.com/name.png">png文件</a></p>
<p><a href="http://www.baidu.com/name.txt">txt文件</a></p>
<p><a href="http://www.baidu.com/#anchor">#锚点超链接</a></p>
<p><a href="http://www.baidu.com/">http://www.baidu.com/</a></p>
</body>
</html>
CSS3结构伪类选择器列表
| 选择器 | 说明 |
|---|---|
| E:root | 选择匹配E元素所在文档的根元素，在HTML中根元素就是html |
| E:nth-child(n) | 选择所有在其父元素中第n个位置的匹配E的子元素，索引的起始值为1，tr:nth-child(3)匹配表格里第三行的tr，tr:nth-child(2n+1)匹配表格奇数行，tr:nth-child(2n)匹配表格偶数行，tr:nth-child(odd)匹配表格奇数行,tr:nth-child(even)匹配表格偶数行 |
| E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 |
| E:nth-of-type(n) | 选择父元素中第n个位置，且匹配E的子元素 |
| E:nth-last-of-type(n) | 选择父元素中倒数第n个位置，且匹配E的子元素 |
| E:last-child | 选择位于其父元素的最后一个位置，且匹配E的子元素 |
| E:first-of-type | 选择在其父元素中匹配E的第一个同类型子元素 |
| E:last-of-type | 选择在其父元素中匹配E的最后一个同类型子元素 |
| E:only-child | 选择其父元素只包含一个子元素，且该元素匹配E |
| E:only-of-type | 选择其父元素只包含一个同类型的子元素，且该元素匹配E |
| E:empty | 选择匹配E的元素，且该元素不包含任何节点，文本也属于节点 |
- 2.2.1实战：设计优雅的数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设计优雅的数据表格</title>
<style type="text/css">
h1{
font-size: 16px;
}
table{
width: 100%;
font-size: 12px;
table-layout:fixed;/*改善表格呈现性能*/
empty-cells:show;/*隐藏不必要的干扰因素*/
border-collapse:collapse;/*使表格看起来更精致，为表格设置合并边框模型*/
margin:0 auto;
border:1px solid #cad9ea;
color:#666;
text-align: center;
}
th{
background: #ccc;
height: 30px;
overflow:hidden;
}
td{
height:20px;
}
td,th{
border:1px solid #cad9ea;
padding:0 1em 0;
}
/*tr下面的偶数行*/
tr:nth-child(even){
background: #f5fafe;
}
</style>
</head>
<body>
<h1>设计优雅的数据表格</h1>
<table>
<tr>
<th>排名</th>
<th>校名</th>
<th>总得分</th>
<th>人才培养总得分</th>
<th>研究生培养总得分</th>
<th>本科生培养总得分</th>
<th>科学研究总得分</th>
<th>自然科学研究总得分</th>
<th>社会科学研究总得分</th>
<th>所属省份</th>
<th>分省排名</th>
<th>学校类型</th>
</tr>
<tr>
<td>1</td>
<td>清华大学</td>
<td>296.77</td>
<td>128.92</td>
<td>93.83</td>
<td>35.09</td>
<td>167.85</td>
<td>148.47</td>
<td>19.38</td>
<td width="16">京</td>
<td width="12">1</td>
<td>理工</td>
</tr>
<tr>
<td>2</td>
<td>南京大学</td>
<td>296.77</td>
<td>128.92</td>
<td>93.83</td>
<td>35.09</td>
<td>167.85</td>
<td>148.47</td>
<td>19.38</td>
<td width="16">京</td>
<td width="12">2</td>
<td>理工</td>
</tr>
<tr>
<td>3</td>
<td>北京大学</td>
<td>296.77</td>
<td>128.92</td>
<td>93.83</td>
<td>35.09</td>
<td>167.85</td>
<td>148.47</td>
<td>19.38</td>
<td width="16">京</td>
<td width="12">3</td>
<td>理工</td>
</tr>
<tr>
<td>2</td>
<td>厦门大学</td>
<td>296.77</td>
<td>128.92</td>
<td>93.83</td>
<td>35.09</td>
<td>167.85</td>
<td>148.47</td>
<td>19.38</td>
<td width="16">京</td>
<td width="12">4</td>
<td>理工</td>
</tr>
</table>
</body>
</html>
- 2.2.2实战：CSS大战保龄球
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
