复合选择器是两个或多个基本选择器通过不同方式连接而成的选择器。
1、交集选择器
由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别或ID选择器。
这两个选择器之间不能有空格,必须连续书写。
这种方式构成的选择器,将选中同时满足前后二者定义的元素,也就是前者所定义的标记类型,并且指定了后者的类别或者id的元素。
- p.special{
- color:red;
- }
- .
- .
- .
- <p class="special">.....</p>
2、并集选择器 或称“集体声明”
结果是同时选中各自基本选择器所选择的范围。任何形式是选择器都可以作为并集selector的一部分。
并集selector是多个选择器通过逗号连接而成的。
另外,对于实际网站中的一些页面,如弹出的对话框和上传附件的小窗口等,希望这些页面中的所有标记都使用同一种CSS样式,但又不希望逐个来声明的情况,可以利用全局选择器“*”:
- <style type="text/css">
- *{
- color:purple;
- font-size:15px;
- }
3、后代选择器
写法:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。当标记发生嵌套时,内层的标记就被称为外层标记的后代。
- <style type="text/css">
- p span{
- color:red;
- }
- .
- .
- .
- <p>嵌套使<span>用css(红色)</span></p>
一些其他的典型代码
- .speical i{
- color:red;
- }
- #one li{
- padding-left:5px;
- }
- td.out .inside strong{
- font-size:16px;
- }
注意:后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响到他的各级后代元素。
在CSS规范中,除了“后代选择器”之外,还有“子选择器”,“子选择器”中选中直接后代元素,而不选中间接后代元素。
- p>b{
- color:red;
- }