CSS 样式调试

Unsplash

a. 找到对应的需要调试的元素，右键，检查

调试元素

b. 出现黄色三角形的警告，表示该 CSS 属性出错

警告

可能的原因有：① CSS 属性结束后，忘记添加分号 ;；② 分号使用了中文的，要使用英文的半角符号；③ 属性名称或属性值写错了

c. CSS 属性被中横线划掉，表示该属性被覆盖，重写

覆盖重写

原因：被自身选择器相同的或者简写的属性覆盖掉

d. 以上两种情况都没有出现，样式还是不生效

原因：简写的 CSS 属性以及分开属性的混在一起书写

div {
  width: 100px;
  height: 100px;
  background-color: black;
  background: url("img/1.png") no-repeat center center;  //PS：1.png图片的宽高60*68，小于100*100
}

<div></div>

运行结果

可以看到，上例中所定义的黑色背景不生效

解决方法：统一使用简写，或者统一使用分开属性，不要混在一起；

background: url("img/1.png") black no-repeat center center;

确实需要混在一起的，分开属性的书写在简写属性后面

background: url("img/1.png") no-repeat center center;
background-color: black;

运行结果

e. 通过 Chrome 调试面板 F12 或者右键检查 判断 CSS 是通过何种方式引入，快速定位到对应的选择器元素

① element.style 表示头部引入

② 对应的选择器的右边如果出现 .html+number 字样，表示样式是通过头部引入的，number 为该选择器所在的页面行数

头部引入

③ 对应的选择器的右边如果出现 .css+number 字样，xxx.css 就是当前样式所在的样式表的名字，是通过外部引入的方式引入的，number 为该选择器所在样式表里的行数

外部引入