下面介绍组合选择器
组合选择器就是相同的属性都放在一起

例如

标题
 
标题
 
标题
 
标题
 
标题

我要让这5种标题的文字都变成红色，显然一个个定义就太麻烦了
我们可以这样

标题
 
标题
 
标题
 
标题
 
标题

当然也可以id选择器，类选择器，标签选择器一起组合

,a,#b,div{ color:red }

注意都要用逗号隔开
如果没用逗号隔开，就是我们下面要说的父子选择器了

 
标题
 
标题
 
标题
 
标题
 
标题
 

假如要让div里的hi标签都成红色
有很多办法，一种用标签选择器，但是会让页面上所有的H1标签都成红色，不好
也可以用类标签，但是每个h1标签里都要class一下 麻烦

我们可以这样

 
标题
 
标题
 
标题
 
标题
 
标题
 

这样就ok了

如果是这样

 
标题 
标题 

这样就ok

 
标题 
标题 

很简单吧，其实父选择可以控制它下面的任何标签或类或id选择器，也就是孙子或重孙子
所以这样也是可以的

 
标题 
标题 

但建议最好不要这样。因为层次不清楚的话很容易搞晕


另外一种属性选择器，不是很常用

      
 
标题 
标题 
  

必训得加

文档说明才有用

         

          
标题
          
标题
          

         

只对等于a的有效

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

但其实也不是常用，不做必训掌握内容


下面是介绍相邻选择器
这可能很难理解

      
标题
 
我离上面标题50px
 
不变
 
不变
  

这其实是针对第一个p的样式，margin-top:50px表示外边距50px，以后学到

还有一种子元素选择器，也比较难理解

先看下面

      
你好吗
 
你好吗
  

这种很熟悉啦，父子选择器，我说过父亲可以控制任意下面的子元素，所以两个好都变红色
如果我只希望a是p的子元素，另外一个a是span的子元素,就该这样

      
你好吗
 
你好吗
  

这两种选择器都得加（当然不是只有这个），否则无效


这两种选择器很灵活，作为高手进阶吧，初学还是把其他选择器基础打牢固


现在是关键内容 div 盒子模型

这是W3C的图，在看另一张图

其实看看就明白的

以上就是div+css网页布局设计新开端（3）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！