text.html

 
 <p class="zw">你可能之前使用过<code>:nth-</code>伪元素选择器：比如使用<code>:last-child</code>从列表中去掉最后一个元素的边框；或者使用<code>:first-child</code>为一篇文章开始的段落添加一个边框，如下所示。</p> 
 <pre class="代码无行号"><code>p:first-child { 
padding-bottom : 1.5rem; 
border-bottom : 1px solid #ebf4f6; 
font-size : 1rem; }</code></pre> 
 <p class="zw">还不错，只是选择首尾的元素来做一些简单的样式定义。只能做到这些吗？当然不是。</p> 
 <p class="zw">在处理可预见的情况时（列表中的项或者表格中的行），<code>:nth-child</code>选择器的表现不错。但当我们不能预知元素的位置时，就需要一个更加灵活的选择。如果能根据类型或者元素在文档中的位置来选择岂不是更好？其实这就是<code>:nth-of-type</code>伪元素选择器要做的，也是CSS的秘密之一。</p> 
 <p class="zw">想选中第一段，不管它出现在文档中的什么位置，都不是问题。那么要选中第四个无序列表例子中的第十三项呢？<code>:nth-of-type</code>同样可以帮助你。任何目标元素，无论它出现在什么位置，都不需要<code>id</code>或者<code>class</code>属性，这确实很强大。</p> 
 <h3 class="sigil_not_in_toc">:nth-of-type参数</h3> 
 <p class="zw"><code>:nth-of-type</code>可以接受像<code>odd</code>或者<code>even</code>这样的关键字，也可以是数字或者表达式。听起来有点复杂，其实并不是，我们一起看几个例子。</p> 
 <p class="zw">如果你想为列表里的奇数项（一、三、五、七…）添加边框，使用<code>:nth-of-type</code>就可以很轻松实现。你不需要为HTML添加class属性或者使用JavaScript hack，只需要用<code>odd</code>关键字就可以。</p> 
 <pre class="代码无行号"><code>li:nth-of-type(odd) { 
border-bottom : 1px solid #ebf4f6; }</code></pre> 
 <p class="zw">在下面的例子中，使用<code>:nth-of-type</code>选择器给文章中的第一段文字加粗。</p> 
 <pre class="代码无行号"><code>article p:nth-of-type(1) { 
font-weight : bold; }</code></pre> 
 <p class="zw">表达式相对复杂些，刚接触时我们都会觉得很烧脑。我的建议是从右往左倒着阅读。在下面的例子中，<code>3n+1</code>表示匹配表格里的第一行（<code>1</code>），然后是每隔3行（<code>3n</code>）。</p> 
 <pre class="代码无行号"><code>tr:nth-of-type(3n+1) { 
background-color : #fff; }</code></pre> 
 <p class="zw"><code>6n+3</code>将匹配每隔六个元素后的第三个元素。</p> 
 <pre class="代码无行号"><code>tr:nth-of-type(6n+3) { 
opacity : .8; }</code></pre> 
</blockquote> 
<p class="zw">现在使用<code>:nth-of-type</code>伪元素选择器来为每张卡片添加背景图像。</p> 
<pre class="代码无行号"><code>.h-card:nth-of-type(1) { 
background-image : url(card-01.jpg); } 

.h-card:nth-of-type(2) { 
background-image : url(card-02.jpg); } 

.h-card:nth-of-type(3) { 
background-image : url(card-03.jpg); } 

.h-card:nth-of-type(4) { 
background-image : url(card-04.jpg); } 

.h-card:nth-of-type(5) { 
background-image : url(card-05.jpg); } 

.h-card:nth-of-type(6) { 
background-image : url(card-06.jpg); } 

.h-card:nth-of-type(7) { 
background-image : url(card-07.jpg); } 

.h-card:nth-of-type(8) { 
background-image : url(card-08.jpg); } 

.h-card:nth-of-type(9) { 
background-image : url(card-10.jpg)); }</code></pre> 
<p class="图"><img alt="1810.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/228.jpg"></p> 
<p class="图题">在小屏幕上，卡片整齐地摆在一起。</p> 
<p class="zw">因为我们只是希望显示元素的背景图像，所以通过缩进把HTML文本移到屏幕外。</p> 
<pre class="代码无行号"><code>.h-card * { 
text-indent : -9999px; }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_295">添加转换</h3> 
<p class="zw">那些卡片虽然看起来不错，但是有点呆板，接下来我们给它们添加一些旋转变换的效果。我们不会给特定的卡片应用这些转换，而是通过<code>:nth-of-type(n)</code>选择器来让设计看起来是随机的。我们把奇数的卡片逆时针旋转2度（<code>-2deg</code>），让它们显得松散一些。</p> 
<pre class="代码无行号"><code>.h-card:nth-child(odd) { 
transform : rotate(-2deg); 
transform-origin : 0 100%; }</code></pre> 
<p class="zw">现在让我们继续调整，给3、4、6的倍数的每一个卡片设置不同的<code>rotate</code>值，给6的倍数的卡片设置<code>translate</code>值，让它们偏离原点。</p> 
<pre class="代码无行号"><code>.h-card:nth-child(3n) { 
transform : rotate(2deg) translateY(-30px); } 

.h-card:nth-child(4n) { 
transform : rotate(2deg); 
transform-origin : 0 100%; } 

.h-card:nth-child(6n) { 
transform : rotate(-5deg); 
transform-origin : 0 0; }</code></pre> 
<p class="图题"></p> 
<p class="图"><img alt="1811.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/229.jpg"></p> 
<p class="图题">多亏了<code>transform</code>和伪元素选择器，现在这堆卡片变得一团糟。</p> 
<p class="zw">在小屏幕上，那些名片很适合垂直的布局，然而在中大型屏幕上，垂直布局并不能很好地利用可用的空间。所以我们接下来使用伪元素通过定位和一些<code>transform</code>，将卡片排成一个网格的形状。</p> 
<p class="zw">再回到设计本身，我们需要给每张卡片设置定位，但又不需要在小屏幕上生效，所以我们使用媒体查询来让这些样式只应用于中大型屏幕。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.h-card { 
position : absolute; } 
}</code></pre> 
<p class="zw">通过定位，给每张卡片的顶部<code>top</code>和左侧<code>left</code>设置一些值，用来形成一个松散的网格。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.h-card:nth-of-type(1) { 
top : 100px; 
left : 0; } 

.h-card:nth-of-type(2) { 
top : 80px; 
left : 320px; } 

.h-card:nth-of-type(3) { 
top : 100px; 
left : 640px; } 

.h-card:nth-of-type(4) { 
top : 320px; 
left : 40px; } 
.h-card:nth-of-type(5) { 
top : 270px; 
left : 570px; } 

.h-card:nth-of-type(6) { 
top : 320px; 
left : 600px; } 

.h-card:nth-of-type(7) { 
top : 540px; 
left : 0; } 

.h-card:nth-of-type(8) { 
top : 560px; 
left : 320px; } 

.h-card:nth-of-type(9) { 
top : 540px; 
left : 640px; } 
}</code></pre> 
<p class="图"><img alt="1812.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/230.jpg"></p> 
<p class="图题">通过应用<code>rotate</code>和<code>translate</code>，设计看起来更自然。</p> 
<p class="zw">你应该已经发现我故意出的错。第五张卡片与水平放置的卡片不同，它是垂直的。把卡片顺时针旋转<code>90deg</code>，这个问题就解决了。旋转的原点<code>transform-origin</code>位于卡片的左上角。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.h-card:nth-of-type(5) { 
transform : rotate(90deg); 
transform-origin : 0 0; } 
}</code></pre> 
<p class="图"><img alt="1813.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/231.jpg"></p> 
<p class="图题">当我们把它顺时针旋转<code>90deg</code>并与其他卡片重叠后，这个孤零零的卡片看起来就好多了。</p> 
<p class="zw">最后我们再做一点润色，给这些卡片添加一些RGBa阴影。</p> 
<pre class="代码无行号"><code>.h-card { 
box-shadow : 
0 2px 1px rgba(0,0,0,.8), 
0 2px 10px rgba(0,0,0,.5); }</code></pre> 
<p class="图"><img alt="1814.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/232.jpg"></p> 
<p class="图题">放大设计，左侧柔和的RGBa阴影增添了景深。</p>