《CSS3实战》笔记--选择器

Posted 2020-07-07 后乐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《CSS3实战》笔记--选择器相关的知识，希望对你有一定的参考价值。

通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.

属性选择器

CSS1中定义的选择器：

这里写图片描述

CSS2中定义的选择器：

这里写图片描述

CSS3新增的属性选择器：

这里写图片描述

实战体验：文档共享的友善之举

在百度文库的下载资源列表的超链接前面都会显示一个文档类型图标，这是一种非常友好的设计细节。使用属性选择器就可以轻松实现。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超级链接类型标识图标</title>
<style type="text/css">
p { margin:4px; }
a[href^="http:"] {/*匹配所有有效超链接*/
 background: url(images/window.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="pdf"] {/*匹配PDF文件*/
 background: url(images/icon_pdf.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="xls"] {/*匹配XML样式表文件*/
 background: url(images/icon_xls.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="ppt"] {/*匹配演示文稿*/
 background: url(images/icon_ppt.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="rar"] {/*匹配压缩文稿*/
 background: url(images/icon_rar.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="gif"] {/*匹配GIF图像文件*/
 background: url(images/icon_img.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="jpg"] {/*匹配JPG图像文件*/
 background: url(images/icon_img.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="png"] {/*匹配PNG图像文件*/
 background: url(images/icon_img.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="txt"] {/*匹配TXT文件*/
 background: url(images/icon_txt.gif) no-repeat left center;
 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.rar">RAR文件</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>

演示效果：

这里写图片描述

结构伪类选择器

结构伪类（Structural pseudo-classes）是CSS3新增的类型选择器。顾名思义，结构伪类选择器就是利用文档结构树（DOM）实现元素过滤。也就是说，通过文档结构的相互关系来匹配特定的元素，从而减少文档内对class属性和ID属性的定义，使得文档更加简洁。

这里写图片描述

实战体验一：设计优雅的数据表格

大量的数据显示在一起时容易影响用户的阅读体验。例如，长时间的阅读数据易引起视觉疲劳，以及诱发错行误读等问题。因此，Web设计师在设计数据表格时应该考虑到用可能会遇到的这些问题。建议采用隔行或隔列换色，动态背景等方法来提升用户浏览大容量数据时的体验。

CSS设计思路

隔行分色时最经典的数据表设计样式，它主要是从易用性的角度来考虑的，以提高用户浏览数据的速度和准确度。传统设计方法是先定义一个样式表，然后把该类应用到所有奇数行或者偶数行上。这种方法会增加设计师的工作量，也给文档添加很多不必要的属性。采用CSS的结构伪类选择器后，实现得将很容易。可以使用E：nth-child(n)选择器快速为偶数行或奇数行定义分色背景，从而便于用户浏览。

代码（传统方法版）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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;
}
th {
    background-image: url(images/th_bg1.gif);
    background-repeat:repeat-x;
    height:30px;
    overflow:hidden;
}
td {
    height:20px;
}
td, th {
    border:1px solid #cad9ea;
    padding:0 1em 0;
}
tr.a1 {
    background-color:#f5fafe;
}
</style>
</head>
<body>
<h1>设计优雅的数据表格</h1>
<table summary="设计优雅的数据表格">
    <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 class="a1">
        <td>2</td>
        <td>北京大学 </td>
        <td>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京 </td>
        <td>2 </td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>3</td>
        <td>浙江大学 </td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙 </td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr class="a1">
        <td>4</td>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>沪 </td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>5</td>
        <td>南京大学</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>苏</td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr class="a1">
        <td>6</td>
        <td>复旦大学 </td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>沪</td>
        <td>2</td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>7</td>
        <td>华中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <td>47.45</td>
        <td>7.87</td>
        <td>鄂 </td>
        <td>1</td>
        <td>理工 </td>
    </tr>
    <tr class="a1">
        <td>8</td>
        <td>武汉大学 </td>
        <td>103.82</td>
        <td>50.21</td>
        <td>29.37</td>
        <td>20.84</td>
        <td>53.61</td>
        <td>36.17</td>
        <td>17.44</td>
        <td>鄂 </td>
        <td>2</td>
        <td>综合</td>
    </tr>
    <tr>
        <td>9</td>
        <td>吉林大学 </td>
        <td>96.44</td>
        <td>48.61</td>
        <td>25.74</td>
        <td>22.87</td>
        <td>47.83</td>
        <td>38.13</td>
        <td>9.70</td>
        <td>吉 </td>
        <td>1</td>
        <td>综合</td>
    </tr>
    <tr class="a1">
        <td>10</td>
        <td>西安交大</td>
        <td>92.82</td>
        <td>47.22</td>
        <td>24.54</td>
        <td>22.68</td>
        <td>45.60</td>
        <td>35.47</td>
        <td>10.13</td>
        <td>陕</td>
        <td>1</td>
        <td>综合</td>
    </tr>
</table>
</body>
</html>

实现效果：

这里写图片描述

代码（结构伪类版）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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;能够让表格看起来更精致。*/
    table-layout:fixed;
    empty-cells:show;
    border-collapse: collapse;
    margin:0 auto;
    border:1px solid #cad9ea;
    color:#666;
}
th {/*使用背景装饰列表头可以让表格看起来更精致*/
    background-image: url(images/th_bg1.gif);
    background-repeat:repeat-x;
    height:30px;
    overflow:hidden;
}
td { height:20px; }/*适当撑起单元格，让数据看起来更轻松*/
td, th {/*浅色线分隔数据行和列，会让表格看起来更清爽。不生硬*/
    border:1px solid #cad9ea;
    padding:0 1em 0;
}
tr:nth-child(even) {/*通过结构伪类选择器为表格内的偶数行定义背景色，以实现隔行分色的显示效果*/
 background-color:#f5fafe;
}
</style>
</head>
<body>
<h1>设计优雅的数据表格</h1>
<table summary="设计优雅的数据表格">
    <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>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京 </td>
        <td>2 </td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>3</td>
        <td>浙江大学 </td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙 </td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>4</td>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>沪 </td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>5</td>
        <td>南京大学</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>苏</td>
        <td>1</td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>6</td>
        <td>复旦大学 </td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>沪</td>
        <td>2</td>
        <td>综合 </td>
    </tr>
    <tr>
        <td>7</td>
        <td>华中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <以上是关于《CSS3实战》笔记--选择器的主要内容，如果未能解决你的问题，请参考以下文章 
 [CSS3] 学习笔记-CSS选择器
 web前端入门到实战：常见CSS3选择器和文本字体样式汇总
 [CSS3] 学习笔记-CSS3选择器详解
 CSS3选择器学习笔记
 笔记 选择器 样式优先级 常用css3
 CSS3学习笔记一（选择器）