css 属性通配符选择器

在flex案例--> 骰子 有看到下面这种样式写法

[class$="face"] {
      margin: 16px;
      padding: 4px;
      
      background-color: #e7e7e7;
       104px;
      height: 104px;
      object-fit: contain;
      
      box-shadow:
        inset 0 5px white, 
        inset 0 -5px #bbb,
        inset 5px 0 #d7d7d7, 
        inset -5px 0 #d7d7d7;
      
      border-radius: 10%;
}

百度之后发现这是属性通配符selector的写法
上述在浏览器里测试 IE7+ 以上 都支持

比较好的解释:在这里,里面讲到的根据部分属性值选择 讲的也是很不错的

主要内容就是

[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

举例来说，如果希望对指向 shunjian.me 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*="shunjian.me"] {color: red;}