Question

css规则问题， .header .form-search {}是什么意思？

大家好。我有个css的地方看不懂，如下：

.header {
width : 980px;
background: url(../images/search_bg.png) bottom right no-repeat;
}
.header .form-search {display: inline; overflow: hidden; float: right;width : 505px;}

既然.header已经被定义，那么 .header .form-search {}是什么意思呢？

Answer 1

.form-search 也是一个类名

在这里.header .form-search是个包含选择符。给你举个例子吧
<div class="header">
<div class="form-search">aaaaaaaa</div>
<div>bbbbbbbbbb</div>
</div>

在这里"aaaaaaaa"的属性值是{display: inline; overflow: hidden; float: right;width : 505px;}和 {width : 980px;
background: url(../images/search_bg.png) bottom right no-repeat;
}的并集，像后面定义了width : 505px;当然是要取width : 505px;，而不是width : 980px;

而"bbbbbbbbb"的属性值就只是 {
width : 980px;
background: url(../images/search_bg.png) bottom right no-repeat;
}，当然这个子div因为受兄弟div影响，宽度就是980-505了

Answer 2

就是说：
定义了header下的form-search的属性

这就牵扯到优先级了。

用法如下：
<div class="header"><div class="form-search">内容</div></div>
可以在header内加入别的div，不过，那时，就只受到.header的控制。

Answer 3

对.header下的.form-search进行定义
其他位置的.form-search没有该效果