4.3 调试选择器

回顾前面各种代码错误的浏览器处理情况。（1）页面显示总是不会报错；（2）如果标签代码与标签属性代码错误，浏览器“将错就错”的解析，开发者工具不会报错，需要通过元素面板与属性面板查看解析结果与代码/期望是否一致；（3）如果CSS属性代码错误，浏览器会严格解析，开发者工具会提示错误信息。

如果编写选择器错误，选择器没有正确匹配元素：可能需要选择的元素没有选择到，可能不想选择的元素被选择，页面表现为元素没有被设置样式或错误被设置样式。总之，开发者工具不会提示错误信息，需要通过元素的样式面板查看元素是否应用选择器。

4.3.1 查看元素应用的选择器

1、查看h4应用的选择器

（1）左边显示匹配的选择器及内容，该元素匹配2个h4标签选择器，只有第1个选择器是我们自己定义。

（2）右边显示选择器的定义文件与行数位置。单击可跳转到源码面板查看源码内容。

（3）“用户代理样式表”表示浏览器自动添加的选择器，通常是标签选择器，实现标签的默认样式。详情见“5.4 标签的默认样式”。后续选择器截图经常会忽略浏览器设置的默认选择器，只截取自定义选择器。

2、查看各个p元素应用的选择器

各p元素应用的选择器完全相同。

错误操作：假装手抖将选择器名称h4错误输入成h41。

        h41{
            margin: 10px 0;            
        }

运行效果：h4元素没有应用到选择器设置样式。

分析方法：查看样式面板，选择器没有匹配当前元素。

匹配出现问题，进一步分析属于选择器的定义问题还是调用问题。这里属于定义问题，h41选择器选择了0个元素，即没有匹配到元素。还有可能是调用问题，例如选择器正确定义h4选择器，但HTML代码错误写成h5标签。

选择器调试的主要内容：查看元素应用的选择器，或者修改选择器内部的样式。