Css 选择依赖于其他类的元素类

我犯了一些错误，需要知道是否可以解决：(

看看这个html

  <style>
    .error { width:32px; height:32px; display:inline-block; }
    /* This is icon class */
  </style>

  <div class="error"> this Is error icon 32px * 32px </div>

  <div class="error"> this Is error notice  500px * 35px </div>

.错误{宽度：32px；高度：32px；显示：内联块；}
/*这是图标类*/
这是错误图标32px*32px
这是错误通知500px*35px

如何使其影响第一个错误类而不影响第二个错误类

我这样做了

.error[class*='icon']{宽度：32px；高度：32px；显示：内联块；}
/*我认为它应该只影响第一节课，而不是*/
这是错误图标32px*32px
这是错误通知500px*35px

还有别的办法吗

---

我使用了

.error[class*='icon']

您可以使用

.error.icon

而不是

.error[class*='icon']

，尽管我不知道属性选择器可能如何影响第二个

.error

元素

---

或者，如果您不想添加额外的类，您可以使用

。错误：第一个子元素
，假设同一容器元素中没有任何其他同级元素。
您可以使用
.error.icon
而不是
。错误[class*='icon']
，但我不知道属性选择器可能会如何影响第二个
。error
元素

或者如果您不想添加额外的类，您可以使用
。错误：第一个孩子
，假设同一容器元素中没有任何其他兄弟元素。
div.icon.error
是最精确的方法
div.icon.error
是最精确的方法
谢谢@BoltClock It工作，可能是我困了，答案很简单：）谢谢@BoltClock工作，可能是我困了，答案很简单：）也谢谢@user1200072:）也谢谢@user1200072:）
  <style>
     .error[class*='icon'] { width:32px; height:32px; display:inline-block; }
      /* i was think it should effect the first class only but not ???  */
  </style>

  <div class="icon error"> this Is error icon 32px * 32px </div>

  <div class="notice error"> this Is error notice  500px * 35px </div>