css 权威指南笔记（四）选择器

• 规则结构

　　每个规则都有两个基本部分组成：选择器和声明块。声明块由一个或多个声明组成，每个声明则是一个属性-值对。

• 元素选择器
• 声明和关键字
  • 关键字一般由空格隔开；有一种情况例外 font属性中的  斜线（/）分割 元素的字体大小和行高两个关键字。
• 分组
• 选择器分组
  • 　通配选择器 （*）css2引入
• 声明分组
• 　各个声明最后使用分号；
• 类选择器和ID选择器
• 　类选择器
  • 多类选择器
    • 　各个词之间用空格分隔
    • 不同平台的Internet Explorer 处理不同
• 　ID选择器
• 属性选择器
  • 　简单属性选择器   h1[class]{color:silver;}
  • 根据具体属性值选择
    • 　　h1#page-title和 h1[id="page-title"]的差别
  • 根据部分属性值选择
    • 　　p[class~="warning"]{font-weight:bold;}
      • 　　　　p.warning 和 p[class~="warning"] 应用到HTML文档时是等价的。

  

• 特定属性选择类型
  • 　[att|="val"]　　
  • *[lang|="en"]{color:white;} 这个规则会选择lang属性等于en或者以en-开头的所有元素。
• 使用文档结构
• 　　后代选择器（包含选择器或上下文选择器）
  • 选择器之间的空格是一种结合符
  • 从右向左读
• 选择子元素 子结合符（>）
• 选择相邻兄弟元素 （+）

　　　　windows平台的 Internet Explorer 在IE6 之前不支持子选择器和相邻兄弟选择器。IE7对两者则提供了支持

• 伪类和伪元素
• 　　伪类选择器 （：）把某种幻想类关联到与伪类相关的元素
• 　　链接伪类  :link  、:visited
• 动态伪类 :focus、:hover 、:active
• • • 　伪类的顺序  link-visited-focus-hover-active
    • windows 平台的Internet Explorer在ie6 之前只允许动态伪类选择超链接，而不允许选择其他元素。IE7支持对所有元素都能应用：hover，但是不支持对表单元素应用：foucs 样式
  • 动态样式的实际问题
    • 　　　　重绘文档
  • 选择第一个子元素
    • 使用另一个静态伪类　:first-child来选择元素的第一个桌子元素
    • windows 平台的Internet Explorer在ie6 之前不支持 ：first-child，不过ie7支持
  • 根据语言选择
    • 　　：lang() 伪类（从对应模式上来讲 像是 |=属性选择器）
  • 结合伪类
    • 　a：hover：link　:long(de)
    • windows 平台的Internet Explorer在ie6 之前不能正确识别这种组合伪类  只会注意到组合伪类中的最后一个伪类；IE7不存在这种限制，它会正确处理这些组合伪类
  • 伪元素选择器（）
    • 　设置首字母样式  ：first-letter
    • 设置第一行样式 :first-line

    　css2 中 ：first-letter 和 :first-line 只能引用于标记或段落之类的块级元素，而不能引用于超链接等的行内元素

    css2.1 中 ：first-letter可应用于所有元素       　　

  • 
    • 设置之前和之后元素的样式
      • 　　:before    h2:before{content:"}}";color:silver;}
      • :after