开发者社区 问答 正文

关于CSS里面的一个小问题

.footer p
{

line-height: 30px;
margin-top: 10px;
margin-bottom: 10px;

}
}

.header
{

height:64px;
background-color: #fff;
border-bottom: 1px solid #1cb234;
position: fixed;
z-index: 2;
width: 1100px;
margin: 0 auto;
left: 0;
right: 0;

}
为什么上面多了一个结束花括号会导致下面的.header的样式失效,求解析原理,半天没想明白,跪谢!!!

PS:补充一下,这是在一个很长的CSS文件里面蛮靠前的位置,结果失效的仅仅是.header部分,其他部分的样式完全没有受到影响。

展开
收起
杨冬芳 2016-06-07 13:36:48 1783 分享 版权
1 条回答
写回答
取消 提交回答
  • IT从业

    由于不知道如何翻译,所以先解释一下几个概念:
    declaration:空值或者由属性名,冒号(:),属性值组成。
    statement:@规则或者规则集(包括selector,{,}以及之间的所有declaration block)。
    selector:在{之前,}之后的内容

    当浏览器解析css的statement的时候,首先会确定selector,然后{,declaration block,},浏览器会把}nn.header当成selector,因为无法解析这个selector,所以会忽略后面的declaration block,所以只有.header选择器的内容出错,后面的依然可以正常解析.

    参考:css syndata
    上面是我看了w3c文档之后的理解,不一定,有什么不对的敬请指正。

    2019-07-17 19:29:51
    赞同 展开评论
问答分类:
问答地址: