一个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!

知识共享许可协议

发表评论

电子邮件地址不会被公开。 必填项已用*标注