css知识点

1、css在定义时的 . 是什么意思，怎么使用？

答：是类选择符，比如：

有这样一个文档结构：

<div class="login-layout">
	<div class="login-box">
		<div class="widget-main"></div>
	</div>
</div>

那么，如果想定义最里层的 widget-main该怎么选择，如下：

1).login-layout .login-box .widget-main

这上面的是CSS中的类的选择符，表示对标签中有class=“login-layout ”下面的子元素中有class=“login-box”的子元素中有class=“widget-main”进行样式定义。

2）处的点代表相对目录
.代表当前目录
..代表父级目录（上级目录）

2、css在定义时的空格是什么意思，怎么使用？

答：是后代选择，比如：

.example  .pp{color:red;}

.example.pp2{color:blue;}

如上面的两个定义一个是中间有空格，一个是中间没空格。
第一个class要这样写生效：

<p class="example">
	<span class="pp">pp这个class生效</span>
</p>

第二个class要这样写生效：

<p class="example pp2">pp2这个class生效</p>

.example .pp = E F 是后代选择器。
.example.pp2 则是在一个元素上，这个元素包括这两个类才会有效果。
.example .pp中间用空格隔开，表示后代选择器，选择的是.example内的.pp。

3、后代选择和子元素选择区别？（空格和>的区别）

选择子元素：h1 > strong {color:red;}
后代选择：h1 em {color:red;}

可参考以下网址的在线编程，把style中定义的h1 > strong{color:red;}中的>改成空格，就会发现，子元素选择会缩小范围，只控制h1元素下的strong，即便是h1中的em标签中的strong都不会产生作用，而后代选择会选择h1标签里所有的strong，就会都选中。

http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_child