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

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

列表最后一行左对齐

flex布局中，最后一行个数不满的情况：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

最后一行不足4个：

<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>

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

.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);
}

效果：

黄色部分为动态计算的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个元素…

文本状态的切换

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

.btn::after {
  content: '展开'
}

#exp {
  display: none;
}

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

html如下：

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

效果：

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

生成箭头

.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;
}

效果：

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

这个就很极客了，先看看效果：

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

.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

.CSS伪类和CSS伪元素

（1）伪类和伪元素的作用

相同之处：都是为某些选择器添加特殊的效果。不同之处：

伪类：操作DOM树中已存在的元素，根据元素不同的状态进行样式设置，在一个选择器中可以有多个伪类；

伪元素：创建DOM树之外的逻辑元素，针对元素中特定内容进行样式设置，在一个选择器中只能有一个伪元素；before和after伪元素中要有content属性。

（2）伪类和伪元素的语法

1）伪类的语法：

/* 伪类的语法：*/
selector:pseudo-class {property:value;}
/* CSS类也可以使用伪类：*/
selector.class:pseudo-class {property:value;}

2）伪元素的语法：

/* 伪元素的语法：*/
selector:pseudo-element {property:value;}或 selector::pseudo-element {property:value;} 
/*CSS类也可以使用伪元素*/
selector.class:pseudo-element {property:value;}或selector.class::pseudo-element {property:value;}

（3）伪类和伪元素有哪些

1）CSS 伪类有哪些？

css伪类有6种，分别为：动态伪类、结构伪类、语言伪类、元素状态伪类、目标伪类、否定伪类。

a）动态伪类

不同的状态，使用不同的样式。

E:link ：选择匹配的E元素，且匹配元素被定义了超链接且未被访问过；常用于链接标签。

E:visited ：选择匹配的E元素，且匹配元素被定义了超链接且已被访问过；常用于链接标签。

E:hover ： 选择匹配的E元素，且用户鼠标停留在元素E上；常用于链接标签。

E:active ：选择匹配的E元素，且匹配元素被激活；常用于链接标签和按钮上。

E:focus ： 选择匹配的E元素，且匹配元素获取焦点。

b）结构伪类

E:fisrt-child ：选择父元素的第一个子元素。与E:nth-child(1)等同。

E:last-child ：选择父元素的最后一个子元素。与E:nth-last-child(1)等同。

E:root ：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同。

E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0。

E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。

E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素。

E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素。

E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同。

E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同。

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素。

E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素。

E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点。

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

c）语言伪类

E: lang(language)：用来匹配使用指定语言的元素。

d）元素状态伪类

E:checked：匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

E:enabled：匹配每个启用的的元素（主要用于表单元素）。

E:disabled：匹配每个禁用的的元素（主要用于表单元素）。

e）目标伪类

E:target：选择匹配E的所有元素，且匹配元素被相关URL指向。是用来改变页面中锚链接URL所指向的ID元素的样式。

f）否定伪类

E:not(F)：匹配所有除F元素外的E元素

2）CSS 伪元素有哪些？

::after (:after) 在选中元素中创建一个后置的子节点

::before (:before) 在选中元素中创建一个前置的子节点

::first-line (:first-line) 选取文字块首行字符

::first-letter (:first-letter) 选取文字块首行首个字符

::selection 选取文档中高亮(反白)的部分

::placeholder 选取字段的占位符文本(提示信息)

::marker 选取列表自动生成的项目标记符号

::backdrop 匹配全屏模式下的背景

::slotted() 用于选定那些被放在 HTML模板 中的元素

::inactive-selection 选取非活动状态时文档中高亮(反白)的部分

#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#

a:link{color:red}a:visited{color:green}a:hover{color:blue}a:active{color:orange}