这篇文章对于css选择器做一个总结，防止自己忘了，方便查找

基础的选择器

1. 通用元素选择器

     * {
           margin:0;
           padding:0;
         }
   

2. 标签选择器

  p {
          font-size:2em;
      }

3. class选择器

  .info {
            background-color:#fff;
        }

4. id选择器

    #info {
               background:#ff0;
          }

组合选择器

1. 多元素选择器

  Div,p { 
              color:#f00;
           }

2. 后代元素选择器

    #nav li { 
                  display:inline; 
              }

3. 子元素选择器

    div > strong {
                    color:#f00; 
                  }//匹配所有div元素的子元素strong元素

+ 后代选择器匹配所有子元素
+ 子元素选择器匹配所有子元素***但不包括孙元素***

4. 毗邻元素选择器

    p + p { 
            color:#f00;
           }//匹配所有紧随p元素之后的同级元素p

css2.1的属性选择器

1. E[att]:匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）

    p[title] { 
                  color:#f00;
               }

2. E[att=val]:匹配所有att属性等于“val”的E元素

    div[class=”error”] {
                         color:#f00;
                      }

3. E[att~=val]:匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

  td[class~=”name”] { 
                        color:#f00;
                     }

4. E[att|=val]:

    p[lang|=en] { 
                   color:#f00; 
                 }

CSS 2.1 中的伪类

1. E:first-child:匹配父元素的第一个子元素

    p:first-child { font-style:italic; }

2. E:link:匹配所有未被点击的链接

      a:link{
                    color:#fff;
              }

3. E:visited:匹配所有已被点击的链接

  a:visited {
                  color:#fff;
            }

4. E:active:匹配鼠标已经其上按下、还没有释放的E元素

    a:active {
                color:#fff;
            }

5. E:hover:匹配鼠标悬停其上的E元素

  a:hover {
              color:#fff                
         }

6. E:focus:匹配获得当前焦点的E元素

    a:focus {
                color:#fff;
              }

7. E:lang(c):匹配lang属性等于c的E元素

    q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; }

CSS 2.1中的伪元素

1. E:first-line:匹配E元素的第一行

    p:first-line { font-weight:bold; color;#600; }

2. E:first-letter:匹配E元素的第一个字母

    .preamble:first-letter { font-size:1.5em; font-weight:bold; }

3. E:before:在E元素之前插入生成的内容

    .cbb:before { 
              content:”"; 
              display:block;
               height:17px;
                width:18px;
               background:url(top.png) no-repeat 0 0; 
               margin:0 0 0 -18px; }

4. E:after:在E元素之后插入生成的内容

    a:link:after { content: ” (” attr(href) “) “; }

• 伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
• 伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

CSS 3的同级元素通用选择器

1. E ~ F:匹配任何在E元素之后的同级F元素

  p ~ ul { background:#ff0; }

CSS 3 属性选择器

1. E[att^=”val”]:属性att的值以”val”开头的元素

    div[id^="nav"] { background:#ff0; }

2. E[att$=”val”]:属性att的值以”val”结尾的元素

3. E[att*=”val”]:属性att的值包含”val”字符串的元素

先总结这么多，未完待续。。。