@疫情后第一天上班TOC

疫情后第一天上班 工资也没发 暴躁

混吃等死的日子结束后我的人生都累觉不爱了

好吧，其实还好啦，看到一篇关于伪类标签的用法：
1. :active伪类与CSS数据上报

1
2
3
4
5
6
7
8
9
10
11
   .button-1:active::after {
	    content: url(./pixel.gif?action=click&id=button1);
	    display: none;
	}
	.button-2:active::after {
	    content: url(./pixel.gif?action=click&id=button2);
	    display: none;
	}
————————————————
版权声明：本文为CSDN博主「杜尼卜」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/duninet/article/details/104841400

2. 超实用超高频使用的:empty 伪类
1
2
3
4
5
6
7
8
    :empty 伪类用来匹配空标签元素，例如：
    <div class="cs-empty"></div>

.cs-empty:empty{
    width: 120px;
    padding: 20px;
    border: 10px dashed;
}

3.字段缺失智能提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
	 <dl>
	    <dt>姓名：</dt>
	    <dd>张三</dd>
	    <dt>性别：</dt>
	    <dd></dd>
	    <dt>手机：</dt>
	    <dd></dd>
	    <dt>邮箱：</dt>
	    <dd></dd>
	 </dl>
</html>	
<style> 
	 dt {
	    float: left;
	  }
	  dd:empty::before {
	    content: '暂无';
	    color: gray;
	  }
</style> 	 
 
  
4. 用好:only-child伪类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
	     <!-- 1. 只有加载图片 -->
			<div class="cs-loading">
			    <img src="./loading.png" class="cs-loading-img">
			</div>
			<!-- 2. 只有加载文字 -->
			<div class="cs-loading">
			    <p class="cs-loading-p">正在加载中...</p>
			</div>
			<!-- 3. 加载图片和加载文字同时存在 -->
			<div class="cs-loading">
			    <img src="./loading.png" class="cs-loading-img">
			    <p class="cs-loading-p">正在加载中...</p>
			</div>

         .cs-loading {
			    height: 150px;
			    position: relative;
			    text-align: center;
			    /* 与截图无关，截图示意用 */
			    border: 1px dotted;
			}
			/* 图片和文字同时存在时在中间留点间距 */
			.cs-loading-img {
			    width: 32px; height: 32px;
			    margin-top: 45px;
			    vertical-align: bottom;
			}
			.cs-loading-p {
			    margin: .5em 0 0;
			    color: gray;
			}
			/* 只有图片的时候居中绝对定位 */
			.cs-loading-img:only-child {
			    position: absolute;
			    left: 0; right: 0; top: 0; bottom: 0;
			    margin: auto;
			}
			/* 只有文字的时候行号近似垂直居中 */
			.cs-loading-p:only-child {
			    margin: 0;
			    line-height: 150px;
			}
————————————————
版权声明：本文为CSDN博主「杜尼卜」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/duninet/article/details/104841400

好困啊，没想到第一天这么困。。。