[分享]css个人信息显示不了

最近在写网页时遇到了一个问题，就是在使用CSS时个人信息无法正常显示。具体描述如下： 个人信息 张三 25岁 前端开发工程师 .showinfo { width: 50; margin: 0 aut...

最近在写网页时遇到了一个问题，就是在使用CSS时个人信息无法正常显示。具体描述如下：

<div class="show-info">
    <h2>个人信息</h2>
    <p class="name">张三</p>
    <p class="age">25岁</p>
    <p class="occupation">前端开发工程师</p>
</div>

.show-info {
    width: 50%;
    margin: 0 auto;
}

.name {
    font-size: 20px;
    color: #333;
}

.age {
    font-size: 16px;
    color: #666;
}

.occupation {
    font-size: 14px;
    color: #999;
} 

按照上述代码编写后，打开页面发现个人信息并没有按照预期显示。这时我开始排查问题：

第一，检查CSS是否正确引入，经过检查发现没有问题。

第二，检查HTML代码是否有错别字，也没有问题。

第三，检查CSS代码是否有错别字，也没有问题。

第四，检查浏览器兼容性，经过测试发现在不同浏览器上都无法正常显示。

在排查了以上四个方面后，我发现了问题所在，原来是CSS代码中的选择器有误，应该使用类选择器（.name、.age、.occupation），而不是标签选择器（p）。

修改后的CSS代码如下：

.show-info {
    width: 50%;
    margin: 0 auto;
}

.name {
    font-size: 20px;
    color: #333;
}

.age {
    font-size: 16px;
    color: #666;
}

.occupation {
    font-size: 14px;
    color: #999;
} 

这个问题虽然比较简单，但也值得注意，希望各位在编写CSS时能够注意选择器的使用。