[分享]css中class不起作用

在CSS中，使用class是一种常见的方式来选择和样式化HTML元素。不过，有时候我们发现在CSS中定义的class并没有生效，这时可能有以下几个原因。 .test { color: red; } 1...

在CSS中，使用class是一种常见的方式来选择和样式化HTML元素。不过，有时候我们发现在CSS中定义的class并没有生效，这时可能有以下几个原因。

 .test {
    color: red;
  } 

1. class名称错误

在定义class时，class名称应该是唯一的而且大小写敏感。如果我们定义的class名称与HTML元素中的class名称不一致，是不会生效的。

 <div class="test">Hello world!</div> 

2. 元素的优先级太高

有些HTML元素自带了默认样式，例如a标签的颜色会默认变为蓝色。如果我们给a标签添加了class，并设置了不同的颜色，但是该class就会被搁置。

 /* 不会生效 */
  .test {
    color: red;
  }
  
  <a href="#" class="test">Click me</a>

  /* 会生效 */
  a.test {
    color: red;
  }

  <a href="#" class="test">Click me</a> 

3. 样式被覆盖

如果我们定义的class样式被另外的样式所覆盖，那么该class就不会生效，这时可以使用!important来强制生效。

 /* 不会生效 */
  .test {
    color: red;
  }

  /* 会生效 */
  .test {
    color: blue!important;
  } 

在使用CSS中出现class不起作用的情况，我们可以通过检查class名称、CSS优先级和样式覆盖三个方面来解决问题。