shuang

CSS2.1规范-seletors

模式匹配决定了哪种样式规则作用于文档树中的元素。这些模式，被称为选择器。

Selectors

模式匹配

模式匹配决定了哪种样式规则作用于文档树中的元素。这些模式，被称为选择器。

CSS2.1的选择器如下：

  • *：匹配任何元素。
  • E：类型选择器，匹配文档树中所有该类型的选择器。 
      h1{  
      font-family:sans-serif;  
  }
  • E F：匹配E元素中的所有的后代元素F。 
      h1 em{  
      color:blue;  
  }
  • E > F：匹配E中的一个孩子元素F。
      body > p{  
      line-height:1.3; 
  }
  • E:first-child：当元素E是它父元素的第一个孩子时，进行匹配。 
      p:first-child em{  
      font-weight:bold;
  }
  • E:link
    E:visited：当E元素为被访问或被访问时的样式。 
      a:link,a:visited{  
      color:red;
  }
  • E:active
    E:hover
    E:focus：当用户有所动作时进行样式匹配。 
      a:link{  
      color:red;
  }  
  a:hover{  
      color:red;
  }
  • E:lang(c)：允许为不同的语言定义特殊的规则。 
      q:lang(no){  
      quotes:"~" "~";
  }
  • E + F：相邻兄弟选择器，匹配紧接在E元素后的F元素，且E和F拥有相同的父元素。 
      h1 + h2{  
      margin-top:10px;
  }
  • E[foo]：根据元素的属性及属性值来选择元素。 
      a[href]{  
      color:red;  
  }  
  a[href][title]{  
      color:blue;  
  }
  • E[foo=”warning”]：只选择有特定属性值的元素。 
      span[class=example]{  
      color:blue;  
  }
  • E[foo~=”warning”]：如果需要根据属性值中的词列表的某个词进行选择，可以使用~。 
      p[class="important warning"]{  
      color:red;  
  }
  p[class~="important"]{  
      color:red;  
  }
  • E[lang|=”en”]：选择lang属性等于en或以en-开头的所有元素。 
      *[lang|="en"]{  
      color:red;  
  }
  • Div.warning：类选择器，匹配class=”warning”的所有div元素。 
      div.important{  
      color:#fff;  
  }
  • E#myId：id选择器，匹配id=”myId”的选择器。 
      h1#chapter1{  
      text-align:center;  
  }

    选择器语法

    分组

    当几个选择器拥有相同的声明时，它们可以通过逗号分隔。
      h1,h2,h3{  
      font-family:sans-serif;  
  }

    通用选择器

    通用选择器*，可以匹配任何元素类型。

    类型选择器

    类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。
    例如：匹配文档树中的所有h1元素： 
      h1{  
      font-family:sans-serif;  
  }

    后代选择器

    后代选择器又称为包含选择器，可以选择作为某元素后代的元素。通过定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另一些结构中不起作用。
    例如：只对p元素中的em元素应用下列规则： 
      p em{  
      color:blue;
      font-size:18px;  
  }

    子选择器

    相邻兄弟选择器

      h1.opener + h2{  
      border:1px solid black;  
  }

    属性选择器

    匹配属性和属性值

    属性选择器的匹配有四种方式：
  • [att] 
      h1[title]{  
      color:blue;  
  }
  • [att=value] 
      span[class=example]{  
      color:blue;  
  }
  span[hello="Cleveland"][goodbye="Columbus"]{  
      color:blue;  
  }
  • [att~=value] 
      a[rel~="copyright"]{  
      text-decoration:none;  
  }
  • [att|=value] 
      *[lang|="en"]{  
      display:none;  
  }

    DTD中的默认属性值

    class选择器

    ID选择器

    伪元素和伪类

  • 伪元素允许设计者为那些原本无法接近的信息指定样式，也可以向设计者提供一种方法为那些源文件中不存在的内容设置样式（如:before和:after）。
  • 伪类也许是动态的，当用户和文档交互时，一个元素也许会获得或失去一个伪类（如:first-child和:lang()）。
    伪元素和伪类都不会出现在源文件或文档树中。
    伪类允许出现在选择器中的任何地方，而伪元素只能出现在选择器中的最后一个选择器上。

    伪类

    :first-child伪类

    :first-child伪类匹配某个元素的第一个子元素。 
      div > p:first-child{  
      text-indent:0;  
  }  
  p:first-child em{  
      font-weight:bold;  
  }

    :link和:visited伪类

    动态伪类:hover，:active，:focus

    语言伪类:lang

    伪元素

    :first-line伪元素

    :first-line伪元素可以为某个段落的第一行指定样式。 
      p:first-line{  
      text-transform:uppercase;  
  }

    :first-letter伪元素

    :first-letter作用于第一行的第一个字母。
      p:first-letter{  
      font-size:3em;  
      font-weight:normal;  
  }

    :before和:after伪元素

    :before伪元素可以在元素的内容前面插入新内容。
    下面的例子在每个元素前面插入一幅图片： 
      h1:before{  
      content:url(logo.gif);  
  }
    :after伪元素可以在元素的内容之后插入新内容。
    下面的例子在每个元素后面插入一幅图片： 
      h1:after{  
      content:url(logo.gif);  
  }