CSS z中 [style] 的写法是什么意思

在张鑫旭大神的博客中http://www.zhangxinxu.com/study/201606/clip-path-piece-fly-into.html
看到了如下CSS代码

.clip[style] {
    opacity: 0;
}
.active .clip:not([style]) {
    opacity: 0;
    animation: fadeIn .1s .4s both;
}
.active .clip[style] {
    will-change: transform;
    animation: noTransform .5s both;
}

我在网上查了查，没有查到这是什么用法，用[style]有什么作用呢？

张鑫旭的源代码如下：
CSS部分

.clip[style] {
    opacity: 0;
}
.active .clip:not([style]) {
    opacity: 0;
    animation: fadeIn .1s .4s both;
}
.active .clip[style] {
    will-change: transform;
    animation: noTransform .5s both;
}

@keyframes noTransform {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box { height: 190px; }
.text { position: absolute; width: 300px; }
.image { position: absolute; }

HTML部分

<strong>1. 普通带文本的元素</strong>
<div class="box active">
    <p id="text" class="text clip">魔兽要上映了...</p>
</div>

<strong>2. 替换元素如图片</strong>
<div class="box active">
    <img id="image" class="image clip" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
</div>

JS部分

<script src="clipPath-min.js"></script>
<script>
var eleText = document.getElementById('text'),
    eleImage = document.getElementById('image');
    
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);

问题是，CSS中用[style]有什么作用呢？

应该是属性选择器

.clip[style]

这不是很好理解吗? 就和div.abc是一样的...

class中包含clip, 并且有style属性

【热门文章】