Google Chrome devtools中的交叉样式属性是什么意思？

5 回答

• 257

  当CSS属性显示为触发时，表示已应用划掉的样式，但后来被更具体的选择器，更本地的规则或同一规则中的更新属性覆盖 .

  （特殊情况：如果匹配规则中存在样式但已被注释掉，或者如果您通过在Chrome开发人员工具中取消选中它来手动禁用该样式，则样式也将显示为触发式 . 它还将显示为交叉out，但带有错误图标，如果样式有语法错误 . ）

  例如，如果背景颜色应用于所有 div ，但是对具有特定ID的 div 应用了不同的背景颜色，则第一种颜色将显示但将被划掉，因为第二种颜色已替换它（在具有该id的 div 的属性列表 .

  回复于 2024-05-04T18:35:32+08:00
• 8

  在旁注 . 如果您正在使用 @media 查询（例如 @media screen (max-width:500px ））请特别注意应用@media查询 AFTER ，您将完成正常样式 . 因为@media查询将被删除（即使它更具体），如果后面跟着操纵相同元素的css . 例：

  @media (max-width:750px){
  #buy-box {width: 300px;}
  }
  
  #buy-box{
  width:500px;
  }
  
  ** width will be 500px and 300px will be crossed out in Developer Tools. **
  
  #buy-box{
  width:500px;
  }
  
  @media (max-width:750px){
  #buy-box {width: 300px;}
  }
  
  ** width will be 300px and 500px will be crossed out **
  

  回复于 2024-05-04T18:35:32+08:00
• 9

  除了上面的答案，我还要强调一个惊人的 property 案件，这真的让我感到惊讶 .

  如果要将背景图像添加到div：

  <div class = "myBackground">
  
  </div>
  

  您希望缩放图像以适合div的尺寸，因此这将是您的正常类定义 .

  .myBackground {
  
   height:100px;
   width:100px;
   background: url("/img/bck/myImage.jpg") no-repeat; 
   background-size: contain;
  
  }
  

  但如果您将订单交换为： -

  .myBackground {
   height:100px;
   width:100px;
   background-size: contain;  //before the background
   background: url("/img/bck/myImage.jpg") no-repeat; 
  }
  

  然后在chrome中你会看到 background-size 被击垮了 . 我不知道为什么会这样，但是你不想惹它 .

  回复于 2024-05-04T18:35:32+08:00
• 3

  如果您想要在获得敲击线指示之后应用该样式，您可以使用 "!important" 来强制执行该样式 . 它可能不是一个正确的解决方案，但解决问题 .

  回复于 2024-05-04T18:35:32+08:00
• -2

  在某些情况下，您将CSS代码复制并粘贴到某个地方并且它会破坏格式，以便Chrome显示黄色警告 . 您应该尝试重新格式化CSS代码，它应该没问题 .

  回复于 2024-05-04T18:35:32+08:00