首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 样式调试

CSS 样式调试

作者头像
Nian糕
修改2024-03-19 17:07:37
3.8K0
修改2024-03-19 17:07:37
Unsplash
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 为该选择器所在样式表里的行数

外部引入
外部引入
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.02.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档