Question

请分析这段HTML代码？

<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>

<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;}/* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%}/* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>

其中的#outer[id]和#middle[id]指的是什么？不理解

Answer 1

在CSS语法里，[ ]是属性选择器，要求是CSS2以上的版本（也就是说，需要浏览器支持CSS2）。
CSS 2 引入属性选择器，可以根据元素的属性及属性值来选择元素。比如：

#outer {....} 这个是对元素id名称是outer的进行css设定。

而

#outer[id] 这个是只针对id名称是outer，并且有属性id的元素进行css的设定。

追问

好吧。被你绕进去了。针对和只针对有什么区别啊？

追答

从效果上没有什么区别，但对于浏览器就有区别了。你用浏览器的工具就可以看到：

#outer {....} 这种是IE浏览器支持的，#outer[id] 这种就不支持了。

Answer 2

模版文件里面的分类id之类的吧. 你在开源框架里看见这个代码的？

追问

我是在一本书中看到的。是一个捷克的设计师弄的。