在写页面的时候，有时会发现自己写的css样式没有生效。 css样式不生效如何排查？ 常见的css样式不起作用的原因有哪些？ 我们来看看css样式不起作用的原因。
解决 css 样式不起作用的步骤：
首先尝试清除缓存、重启浏览器等，如果失败再进行进一步排查。
然后按照以下流程进行检查：
以下是要检查的内容以及如何更改它：
再次提醒我在排查之前先尝试清除缓存、重启浏览器等，如果失败再继续进一步排查。 有可能我没有做错什么，但这是由缓存或浏览器问题引起的。 重置后问题就解决了。
CSS 样式不起作用的常见触发器：
1.没有关联外部样式表
这是一个非常无语的错误，不过我以前也遇到过。 辛苦写完代码html标记是什么，发现所有的样式都没有生效。 摆弄了半天，最后发现忘记关联外部样式了。 我的心情，真的。 。
如果你的样式都没有生效，首先确认没有关联的样式表，或者关联的样式的位置和名称是否正确
2.样式表保存编码错误
如果怀疑CSS表的编码错误，可以直接将CSS文件以utf-8编码保存为文件。
3、如果选择器写错了，后代的选择等，涉及到多个标签、类名、id等，而且子选择器的顺序和名称错误，可能会导致错误；
html中的标签忘记写类名和id，选择器使用这个缺少的类名、id等，样式自然不会生效。
后代选择器是否写有空格；
像div.box{}这样的选择器会不会写成div.box{}，即会多写一个空格
4. 语法错误
以Google Chrome的开发者工具为例。 一般情况下，句型错误会显示为样式被划掉，样式两侧有图标提示，鼠标移入时会显示中文提示。如下图：
常见的句子错误包括：
1、属性名称写错，属性值不符合规范；
2、下列符号均使用英文或半角符号：,;{}：
3、html标签写得不完整，缺少“”等。
5.样式层叠
如果是层叠引起的，需要提高样式的优先级。
常用的方法有：在选择器中添加元素以增加其特异性html标记是什么，或者在样式分号前添加!important并加一个空格，如下：background-color:pink!important;
发表评论