Question

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

看看这个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>

如何让它影响第一个错误类而不影响第二个

我这样做了

  <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>

还有其他方法吗？我用过 .error[class*='icon']

Answer 1

您可以使用.error.icon代替.error[class*='icon']，但我不知道您的属性选择器可能会如何影响您的第二个.error元素。

或者，如果您不想添加额外的类，则可以使用.error:first-child，假设同一个容器元素中没有任何其他兄弟元素。

Answer 2

div.icon.error是最精确的方法

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

2 个答案: