再次认识CSS中的伪类

CSS中的伪类真是个神奇的东西,有时要实现某些布局的时候菜鸟都是divdiv,实在不行上flex,而高手一般都是用最少的元素来实现效果,比如巧妙的运用伪类来达到目的的同时减少元素节点,代码清爽了很多不用再写一坨div

这不,最近学习了几招伪类的使用,特此记录下。

列表最后一行左对齐

flex布局中,最后一行个数不满的情况:

1
2
3
4
5
6
7
8
9
10
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}

最后一行不足4个:

1
2
3
4
5
6
7
8
9
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>

3956

解决思路有很多,这里我只说一种方式:使用伪类动态计算最后一个元素的margin。比如每行有4个元素,最后一行只有3个,就计算最后一个的margin-right为“元素宽度+间隔大小”,若只有2个,则margin-right为"2个元素宽度+2个间隔大小",以此类推,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
display: flex;
/* 两端对齐 */
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
margin-right: calc(48% + 8% / 3);
}

效果:

7009

黄色部分为动态计算的margin,上面代码最重要的就是.list:last-child:nth-child(4n - 1),骚操作,头一次见,稍微解释下:

  • .list:last-child:nth-child(4n - 1):说明最后一个同时也是4n-1个,就是要么第3个元素,要么第7个元素…
  • .list:last-child:nth-child(4n - 2):说明最后一个同时也是4n-2个,就是要么第2个元素,要么第6个元素…

文本状态的切换

元素的展开和收起也是会经常遇到的,默认收起状态,点击后就会展开,类似于点击弹出下拉菜单,只涉及到两种状态,也可以结合伪类实现:

1
2
3
4
5
6
7
8
9
10
11
.btn::after {
content: '展开'
}

#exp {
display: none;
}

#exp:checked+.btn::after {
content: '收起'
}

html如下:

1
2
3
4
<div class="wrap">
<input type="checkbox" id="exp">
<label class="btn" for="exp"></label>
</div>

效果:

9921

这里巧妙地借助:checked伪类实现状态的切换,换做javascript就要写好几行代码。

生成箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.arrow-button {
position: relative;
width: 180px;
height: 64px;
background: #f49714;
}

.arrow-button::after {
content: "";
position: absolute;
width: 32px;
height: 64px;
top: 0;
right: -32px;
background:
linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 0 bottom, 0 top;
}

效果:

13371

根据文本长度自动调整字体大小

这个就很极客了,先看看效果:

13461

这个是先效果的背后和第一个例子一样使用了伪类级联,同一个选择器上使用多个伪类,核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box span {
font-size: 40px;
}
.box span:first-child:nth-last-child(n+13),
.box span:first-child:nth-last-child(n+13) ~ span {
font-size: 30px;
}
.box span:first-child:nth-last-child(n+17),
.box span:first-child:nth-last-child(n+17) ~ span {
font-size: 20px;
}
.box span:first-child:nth-last-child(n+25),
.box span:first-child:nth-last-child(n+25) ~ span {
font-size: 14px;
}

通过使用伪类级联能控制不同字符个数的样式。

能实现的效果还有很多,很多我也不会。。。

就我自己在开发时,很容易就把伪类这个东西抛之脑后了,下意识地习惯直接div一把梭,实现不了就用javascript,因为这种下意思的习惯成本很低,不要多加思考。其实有时候仔细想想,很多情况真的没必要“杀鸡用牛刀”,习惯也是有代价的,下意识的使用方式看起来似乎成本很低,但代码因此变得复杂,增加了后期的维护成本和理解成本。不光是我们在编码的时候,生活中也是如此,遇到问题不放多思考,不要急于作出反馈。

参考

http://www.zhangxinxu.com/wordpress/?p=1514

https://www.zhangxinxu.com/wordpress/?p=8540

https://segmentfault.com/a/1190000040030723


欢迎阅读本篇文章,如有兴趣可以关注博主公众号哦: