前端玄学bug ....关于直接写style样式和用选择器导致的玄学

一个很简单的题 我遭遇了玄学bug  借此机会 记录一下 如果侥幸有大佬看到 那就有人可以给我解答了 那就更好了

 

写一个内容如果超出了块后面的文字就用“...”显示 鼠标移上去 就显现全部 ，看着很简单嘛

就直接给

.h{
    text-overflow:ellipsis;
    width: 70px;
    border: 2px #fff000 solid;
    white-space:nowrap;
    overflow:hidden;
}

然后用hover 把overflow改一下 将隐藏的显现出来就可以了

.h:hover{
    overflow:visible;
}

这个时候 使用h这个选择器的元素就不用在标签里设置style了 直接用选择器就好   如果是这样的话 就一点问题都没有了...

 

但是我偷懒了  我懒得写选择器 直接写在了style里  这个时候我再写

<div><p class="h" style="width: 70px;border: 2px #fff000 solid;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">kekeke咳咳咳</p></div>  

<!-- 注意此时我根本没有写h这个选择器 样式全部写在了style里 -->

 这个时候..再写hover是没有用的 【这只是一个警醒 不是玄学bug】

 

那么这个时候我再不规范一下 我写了一个h 但是我没写全 【因为懒 所以只剪切了一部分的样式到选择器里 于是遇到的这个bug】

.h{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}



<div><p class="h" style="width: 70px;border: 2px #fff000 solid;">kekeke咳咳咳</p></div>

这个时候问题来了  文字它换行了？？？鼠标移上去的时候换行了...换不换行取决于它

white-space:nowrap;

后来反复试验 只要它放在了选择器里 且style里写有样式 这个时候 “不换行”就失效了...  这是为什么？？  有点玄学 猜测是因为优先级的问题  但是优先级也得是有冲突的时候 才体现的把  这几种属性样式 都跟他不冲突啊？？ 

 

一个小小的问题...各种实践  发现了各种问题...  菜鸡就是容易踩坑..  所以 多实践多动手

 

ps: 最好不要在盒子里套 子元素  这样的话 设置样式的话 要再细节一点