两道超有意思的 CSS 面试题，试试你的基础( 二 ) _生活百科

文章插图
再来一题， MDN 的错误例子？一个有意思的现象说完上面这题。我们再来看看一题，非常类似的题目。
在 MDN 介绍 :not 的页面，有这样一个例子：
/* Selects any element that is NOT a paragraph */:not(p) {color: blue;}意思是， :not(p) 可以选择任何不是 <p> 标签的元素。然而，上面的 CSS 选择器，在如下的 HTML 结构，实测的结果不太对劲。
<p>p</p><div>div</div><span>span</span><h1>h1</h1>结果如下：

文章插图
CodePen Demo -- :not pesudo demo
意思是， :not(p) 仍然可以选中 <p> 元素。是的，在多个浏览器，得到的效果都是一致的。
看到这里，你可以再停一下，思考一下，为什么 <p> 元素的颜色仍旧是 color: blue？
这是为什么呢？解答一下：
这是由于 :not(p) 同样能够选中 <body> ，那么 <body> 的 color 即变成了 blue ，由于 color 是一个可继承属性， <p> 标签继承了 <body> 的 color 属性，导致看到的 <p> 也是蓝色。
我们把它改成一个不可继承的属性，试试看：
/* Selects any element that is NOT a paragraph */:not(p) {border: 1px solid;}

文章插图
OK ，这次 <p> 没有边框体现，没有问题！
因此，实际使用的时候，需要一定要注意样式继承的问题！
最后本文到此结束，希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
【两道超有意思的 CSS 面试题，试试你的基础】