# 能用css办到,就不写js了吧
.button-1:active::after {
content: url(./pixel.gif?action=click&id=button1);
display: none;
}
//点击按钮即可自动上报
1
2
3
4
5
2
3
4
5
:empty 伪类用来匹配空标签元素,例如:
<div class="cs-empty"></div>
.cs-empty:empty{
display: none;
}
//如果元素为空,即隐藏,也可用在如果字段没有数据,就自动填充暂无即
dd:empty::before {
content: '暂无';
color: gray;
}
//如果列表不存在信息即填充暂无
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
除此之外,还有一类典型场景需要用到:empty伪类,那就是动态Ajax加载数据为空的情况。当一个新用户进入一个产品的时候,很多模块内容是没有的。要是在过去,我们需要在Javascript代码中做 if 判断,如果没有值,我们要吐出”没有结果“或者”没有数据“的信息。但是现在,有了:empty伪类,直接把这个工作交给CSS就可以了。例如:
.cs-search-module:empty::before{
content: '没有搜索结果';
display: block;
line-height: 300px;
text-align: center;
color: gray;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
:only-child 意思是匹配没有任何兄弟元素的元素。例如,下面的 p 元素可以匹配:only-child伪类,因为其前后没有其他兄弟元素:
###页面变灰,哀悼 在最外面的html标签上写这个样式即可
filter: grayscale(1);
1