HTML+CSS之找茬

很多刚进入前端行业的小伙伴在写页面的时候，很容易出现错误，这时候很多小伙伴就会一行行查看自己的代码哪里有问题，或者仔细的对比网上代码，这样查看错误很浪费时间而且陷入了自己的思维里面看不出错误在哪里。下面呢，教大家如何快速的查找错误及解决问题。
其实，咱们的浏览器就有控制台及一些辅助工具等帮助我们查找错误，在这里我使用的Chrome（谷歌浏览器）的控制台来进行错误的查找。打开控制台方式有两种，一种在浏览器中点击鼠标右键，选择检查，如下图

另一种，直接通过快捷键F12（如果F12不行，可以试一下Fn+F12），调出来控制台

好了，了解完这些以后，我们来看一下都有哪些错误，以及如何通过控制台查看错误进行更改。先写一个比较简单的效果，写一个div标签，给这个div写一个宽200px，高100px，背景颜色为粉色，效果如下：

想象中是这样的，完美，但实现效果上可能是这样的：

what，我粉色长方形去哪了？？？这个时候就出现问题了，出现问题的时候要稳住别慌，通过控制台查看一下，首先看一下css样式有没有引入成功，上面说到过控制台左边为html标签，右边是css属性，我们先选中div看一下右边有没有写的css属性

在这里看到css那里没有我们写的宽高背景颜色，一种可能是我们css没有引入成功，可以去查一下自己写的路径对不对；另一种可能我们写的这个标签的css修饰前多写了标点符号。
好了，在往下看，如果css有还是没有出来，就看一下单词是否拼对、属性和属性值是否匹配。单词不对，或属性和属性值不匹配那么控制台的css属性前面会出现一个黄色的感叹号，如下图

这个时候就需要你查一下单词和属性了。
还有我们在网页导航的时候会给导航项加边框，但有时候要取消第一个或者最后一个的边框，我们给第一个或最后一个li加class名取消边框，发现取消不了，在控制台中有写的有，只不过被拉掉了（注意只是拉掉没有黄色感叹号），这个时候可能是选择器权重不够

<ul class="nav">
	<li class="noborder">首页</li>
	<li>首页</li>
	<li>首页</li>
	<li>首页</li>
	<li>首页</li>
</ul>

<style>
	*{margin: 0;padding: 0;}
	ul,li{list-style: none;}
	.nav{width: 505px;margin: 50px auto;}
	.nav li{
		float: left;
		text-align: center;
		line-height: 30px;
		width: 100px;
		height: 30px;
		background: #ccc;
		border-left: solid 1px #333;
	}
	.noborder{border-left: 0;}
</style>

那么我们可以通过包含选择题增加权重，找到父元素的class名，添加到前面就可以

.nav .noborder{border-left: 0;}

OK，基本上咱们遇到的错误有这几种，总结一下：

1. 没有相应CSS属性，查引入路径或看选择符前是否多加标点
2. 出现感叹号被拉掉，单词拼写错误或属性属性值不匹配
3. 出现属性被拉掉但没有感叹号，权重不够