web前端经典教程之伪类妙用

1、1. 像上面两种设计方式，文案和装饰元素都有一定的变化，其中文案的字体还尤为艺术。重构这类设计的时候，基本要把各个板块都切出来，如下图所示。这种方式有一个不好的地方就是增加了http请求，电商的一个专题页商品那么多，这都还没有放商品图片，就有7～8张图片需要加载了，这样会导致网页打开较慢。

3、1. 下面这种设计是装饰元素不变，变的是文案，如果这里文案用常规字体，那就是最优的设计了，用艺术字体就有点画蛇添足了。文字用写出来的方式的话，则需要引入这种字体，洹彭岣啬而字体体积一般也不小，为了不到十几处的文字，引入字体库显然有点浪费流量，更主要的是影响加载速度，所以切图时文字基本当图片来切了。跟第一种重构方式不一样的是，切图时把所有主题图片都整合到一张图片上了。

5、3. 重构代码如下所示，相对来说减少了http请求，但是这张整合的图片体积往往会大一点，然后各个板块显示的部分，用调节背景位置的方式控制。

7、2. 那种情况就像下面这种感觉，虽然设计师巧妙的用疏散装饰性元素的方式去协调美观，但是并没有解决本身相对位置不一致的根本问题。

9、4. 既然背景图都一样，变化的文字又可以直接写出来，代码比前两种就更简单了，如下所示。

11、2. 更直观的就是，重构只需要下面这张尺寸更小、体积更小的图片。不过麻雀虽小，五脏俱全，图片虽小，用它来还原整个主题部分的设计，已经绰绰有余了。

13、 另外，css中的伪类除了:before和:after以外，还有诸如:hover、:checked、:focus、:nth-child(n), 其实伪类数量比其他标签选择器（div、p、h1)的总和还多，但是在css中出现的次数却是最少的，不是因为不实用，而是功能性的东西出现在正确的时间和地点就好，而不是靠出现次数和低级勤奋刷存在感的，就好像梅西一样，他踢球像是在散步，但是他不疯跑也不会被否定价值。同样，css伪类也是扮演着这样的角色，各司其职并于关键处，一招棋活。:hover多用于css中处理滑过时的交互，:checked多用于css中选择选中的表单，:focus多用于js中激活输入框后执行某个行为，:nth-child(n)多用于css中选择同类元素中特定的单个或多个元素。喜欢并觉得实用的朋友，可以多多关注我哦，后续会推出更多贴合设计的前端教程……！