CSS为p标签设置的border边框未正常显示是什么原因？

• 核心问题是CSS选择器和HTML元素不匹配：你在CSS中定义的样式规则是p.mf，该选择器只会匹配带有class="mf"属性的p标签，但是你当前HTML代码里的p标签没有添加mf类，所以这条边框样式不会生效。
• 同理你写的h2.mf规则也无法作用于页面里的h2标签，因为对应的h2也没有添加mf类。

你可以根据需求二选一：

1. 如果你希望类名为mf的div内部的所有p标签都应用该样式，把CSS选择器改成div.mf p即可，该选择器会匹配所有在class="mf"的div里的p元素。
2. 如果你就是要通过mf类单独控制p标签的样式，直接给HTML中的p标签加上类属性即可，修改后的p标签代码为：

<p class="mf">This is para....</p>

修改后就能看到p标签的红色边框了。

内容的提问来源于stack exchange，提问作者Abhay Kumar