一个css选择器的小坑

之前博客主题中的有序列表显示有点问题,列表标记位置会在正文左边突出一部分,所以设置了 padding 值来解决此问题:

但有发现无序列表也有这个问题:

2016-05-10_015434

所以想当然的在之前的位置后面把 ul 标签加上:

然后就悲剧了,页面上其它位置的 ul 也 padding-left: 20px 了:

2016-05-10_020412

好久没写 css 了,百思不得其解,试过 .article-content > ol, ul.article-content section > ol, ul 都不行,甚至怀疑同级标签也有继承的关系。后来发现其它地方会把 class 标签写两次才恍然大悟,应该是逗号「,」优先级更高一点,把选择器解析成了 .article-content ol 和 ul 两部分,所以选择器写成 .article-content ol, .article-content ul 就可以了。

不用就会忘,随便改点东西就踩坑了。Orz!

CC BY-NC-SA 4.0

扫码分享

      复制标题+网址成功,请去要分享的地方粘贴

本 Blog 不支持评论,如有疑问或建议请联系我,以完善内容,期望帮助到更多的同学