（html初学）css选择器

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。

　　避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。

　　一、基本选择器

选择器	描述	CSS版本
E	标签选择器，匹配所有使用E标签的元素
*	通用元素选择器，匹配任何元素
.info	class选择器，匹配所有class属性中包含info的元素
#footer	id选择器，匹配所有id属性等于footer的元素

比如：

  
  

   
    1 
   
   * 
   
   {
   
    margin
   
   :
   
   0
   
   ;
   
    padding
   
   :
   
   0
   
   ;
   
    
   
   }
   
   

   
    2 
   
   

   
    3 
   
   p 
   
   {
   
    font-size
   
   :
   
   2em
   
   ;
   
    
   
   }
   
   

   
    4 
   
   

   
    5 
   
   .info 
   
   {
   
    background
   
   :
   
   #ff0
   
   ;
   
    
   
   }
   
   

   
    6 
   
   

   
    7 
   
   p.info 
   
   {
   
    background
   
   :
   
   #ff0
   
   ;
   
    
   
   }
   
   

   
    8 
   
   

   
    9 
   
   p.info.error 
   
   {
   
    color
   
   :
   
   #900
   
   ;
   
    font-weight
   
   :
   
   bold
   
   ;
   
    
   
   }
   
   

   
   10 
   
   

   
   11 
   
   p#info 
   
   {
   
    background
   
   :
   
   #ff0
   
   ;
   
    
   
   }
  
  

 

二、多元素的组合选择器

选择器	描述	CSS版本
E，F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E>F	子元素选择器，匹配所有E元素的儿子元素F
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F	匹配任何E标签之后的同级F标签	3

比如：

  
  

   
   1 
   
   div,p 
   
   {
   
    color
   
   :
   
   #f00
   
   ;
   
    
   
   }
   
   

   
   2 
   
   #nav,li 
   
   {
   
    display
   
   :
   
   inline
   
   ;
   
    
   
   }
   
   

   
   3 
   
   #nav a 
   
   {
   
    font-weight
   
   :
   
   bold
   
   ;
   
    
   
   }
   
   

   
   4 
   
   div>strong 
   
   {
   
    color
   
   :
   
   #f00
   
   ;
   
    
   
   }
   
   

   
   5 
   
   p+p 
   
   {
   
    color
   
   :
   
   #f00
   
   ;
   
    
   
   }
   
   

   
   6 
   
   p~ul 
   
   {
   
    color
   
   :
   
   #f00
   
   ;
   
    
   
   }
  
  

1、并列选择器（E,F,G,...）

　　这类选择器之间用逗号作分割，能匹配选择器列出的所有标签元素。

2、后代选择器（E F; E>F）

　　E F,标签之间用空格隔开，表示匹配E标签内所有F标签，所匹配的F标签不仅仅是E标签的儿子，还有可能是E标签的孙子，或者曾孙、从孙等等。

　　E>F标签匹配所有为E标签儿子的F标签。

3、兄弟选择器（E+F；E~F）

　　E~F选择其中F标签无需紧紧跟随E标签后面第一个，如果需要实现这样的一个功能可以用E+F选择器。对于IE浏览器来说只有IE6以上的版本才支持该选择器。

三、属性选择器

选择器	描述	CSS版本
E[attribute]	匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）	2.1
E[attribute=value]	匹配所有attribute属性等于“value”的E元素	2.1
E[attribute~=value]	匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素	2.1
E[attribute|=value]	匹配这类E元素，它具有attribute属性的就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等	2.1
E[attribute^=value]	匹配所有attribute属性值是以“value”开始的E元素	3
E[attribute$=value]	匹配所有attribute属性值包含有“value”的E元素	3
E[attribute*=value]	匹配所有attribute属性值是以"value"结束的E元素	3

比如： 

CSS

 

四、伪类选择器

选择器	描述	CSS版本
E:first-child	匹配父元素的第一个子元素E	2.1
E:link	匹配所有未被点击的链接	2.1
E:visited	匹配所有已被点击的链接	2.1
E:active	匹配鼠标已经其上按下、还没有释放的E元素	2.1
E:hover	匹配鼠标悬停其上的E元素	2.1
E:focus	匹配获得当前焦点的E元素	2.1
E:lang(c)	匹配lang属性等于c的E元素	2.1
E:enabled	匹配表单中激活的元素	3
E:disabled	匹配表单中禁用的元素	3
E:checked	匹配表单中被选中的radio或者checkbox元素	3
E::selection	匹配用户当前选中的元素	3
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素	3
E:nth-child(n)	匹配其父元素的第n个子元素，n从1开始计算	3
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1	3
E:nth-of-type(n)	与:nth-child(n)作用类似，用作匹配使用同种标签的第n个元素	3
E:nth-last-of-type	与:nth-last-child作用类似，用作匹配同种标签的最后一个元素	3
E:last-child	匹配父元素的最后一个子元素，等同于E:nth-last-child(1)	3
E:first-of-type	匹配父元素下使用同种标签的第一个元素，等同于E:nth-of-type(1)	3
E:last-of-type	匹配父元素下使用同种标签的最后一个元素，等同于E:nth-last-of-type(1)	3
E:only-child	匹配父元素下仅有的一个子元素，等同于E:first-child:last-child或者E:nth-child(1):nth-last-child(1)	3
E:only-of-type	匹配父元素下使用相同标签的唯一一个子元素，等同于E:first-of-type:last-of-type或者E:nth-of-type(1):nth-last-of-type(1)	3
E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素	3
E:not(s)	匹配不符合当前选择器的任何E标签元素	3
E:target	匹配文档中特定“id”点击后的效果	3

　　1、E:first-child

　　您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素（也就是第11行的p，不是strong元素）：

 

  
  

   
    1 
   
   <
   
   html
   
   >
   
   

   
    2 
   
    
   
   <
   
   head
   
   >
   
   

   
    3 
   
    
   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   

   
    4 
   
     p:first-child 

   
    5 
   
     
   
   {
   
   

   
    6 
   
       color
   
   :
   
    red
   
   ;
   
   

   
    7 
   
     
   
   }
   
    

   
    8 
   
    
   
   </
   
   style
   
   >
   
   

   
    9 
   
    
   
   </
   
   head
   
   >
   
   

   
   10 
   
    
   
   <
   
   body
   
   >
   
   

   
   11 
   
    
   
   <
   
   p
   
   >
   
   123123
   
   <
   
   strong
   
   >
   
   some text
   
   </
   
   strong
   
   ></
   
   p
   
   >
   
   

   
   12 
   
    
   
   <
   
   p
   
   >
   
   some text
   
   </
   
   p
   
   >
   
   

   
   13 
   
    
   
   </
   
   body
   
   >
   
   

   
   14 
   
    
   
   </
   
   html
   
   >
  
  

　　最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。对于IE浏览器，必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE6+ 中生效。还有一个问题就是，有时候会创建一个aspx文件，如下：

HTML

　　运行起来发现字体颜色并不是红色，为什么呢？其实这个p不是第一个元素。我们可以查看一下页面运行起来后生成的Html，这样问题就清楚了。

HTML

2、动态伪类

　　所谓的动态伪类，是指它们并不存在HTML中，而是只有当用户和网站交互的时候才会呈现。E:link, E:visited, E:hover, E:active 和 E:focus都属于这类，前面四种又称之锚伪类。

　　在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。

动态伪类被所有的现代浏览器支持，甚至IE6。但是请注意，对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)，而且只有IE8才接受应用于非a标签的:active状态。

CSS

3、:lang伪类

　　语言伪类:lang 使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

  
  

   
    1 
   
   <
   
   html
   
   >
   
   

   
    2 
   
    
   
   <
   
   head
   
   >
   
   

   
    3 
   
   

   
    4 
   
    
   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   

   
    5 
   
   q:lang(no)

   
    6 
   
      
   
   {
   
   

   
    7 
   
      quotes
   
   :
   
    "~" "~"

   
    8 
   
      
   
   }
   
   

   
    9 
   
    
   
   </
   
   style
   
   >
   
   

   
   10 
   
   

   
   11 
   
    
   
   </
   
   head
   
   >
   
   

   
   12 
   
   

   
   13 
   
    
   
   <
   
   body
   
   >
   
   

   
   14 
   
    
   
   <
   
   p
   
   >
   
   文字
   
   <
   
   q 
   
   lang
   
   ="no"
   
   >
   
   段落中的引用的文字
   
   </
   
   q
   
   >
   
   文字
   
   </
   
   p
   
   >
   
   

   
   15 
   
    
   
   </
   
   body
   
   ></
   
   html
   
   >
  
  

4、UI元素状态伪类

　　有些HTML元素有enable 或disabled 状态(比如，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled或:checked 伪类来分别定位。 

  
  

   
    1 
   
   input:enabled

   
    2 
   
    
   
   {
   
   

   
    3 
   
       background-color
   
   :
   
   Red
   
   ;
   
                           

   
    4 
   
    
   
   }
   
   

   
    5 
   
   input:disabled

   
    6 
   
    
   
   {
   
   

   
    7 
   
       background-color
   
   :
   
   Yellow
   
   ;
   
   

   
    8 
   
    
   
   }
   
   

   
    9 
   
   input[type="checkbox"]:checked 
   
   {
   
   

   
   10 
   
       margin-left
   
   :
   
    15px
   
   ;
   
   

   
   11 
   
    
   
   }
  
  

这类型的选择除了IE浏览器不支持外，其他的浏览器都支持。

5、E::Selection

　　目前没有任何一款IE或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

  
  

   
   1 
   
   div:selection

   
   2 
   
    
   
   {
   
   

   
   3 
   
         background-color
   
   :
   
   Green
   
   ;
   
   

   
   4 
   
    
   
   }
  
  

6、结构伪类选择器

　　这类选择器包括有E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type 和 E:empty。Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器支持这些选择器。

CSS

7、否定选择器

　　否定选择器:not()，可以让你定位不匹配该选择器的元素

比如，如果你需要定义表单元素中的input元素，但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：

  
  

   
   1 
   
   input:not([type="submit"]) 

   
   2 
   
    
   
   {
   
   

   
   3 
   
       width
   
   :
   
    200px
   
   ;
   
   

   
   4 
   
       padding
   
   :
   
    3px
   
   ;
   
   

   
   5 
   
       border
   
   :
   
    1px solid #000000
   
   ;
   
   

   
   6 
   
    
   
   }
  
  

　　IE浏览器不支持这个选择器。

8、:target选择器

　　当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使用:target伪类来控制目标的样式。

举个例子，比如你有一个很长的使用了很多文字和h2标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。 

HTML

 IE浏览器完全不支持:target伪类，另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。

五、伪元素选择器

选择器	描述	CSS版本
E:first-line	匹配所有E标签内的第一行	2.1
E:first-letter	匹配所有E标签内的第一个字母	2.1
E:before	在E标签之前插入生成的内容	2.1
E:after	在E标签之后插入生成的内容	2.1

1、:first-line伪元素

　　"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式：

  
  

   
   1 
   
   p {font-size: 12pt}

   
   2 
   
   p:first-line {color: #0000FF; font-variant: small-caps}

   
   3 
   
   

   
   4 
   
    
   
   <
   
   p
   
   >
   
   Some text that ends up on two or more lines
   
   </
   
   p
   
   >
   
   

   
   5 
   
    
  
  

　　在上面的例子中，浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。first-line 伪元素仅能被用于块级元素。

2、:first-letter伪元素

　　first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

  
  

   
   1 
   
   p {font-size: 12pt}

   
   2 
   
   p:first-letter {font-size: 200%; float: left}

   
   3 
   
   

   
   4 
   
    
   
   <
   
   p
   
   >
   
   The first words of an article.
   
   </
   
   p
   
   >
  
  

3、:before和:after伪元素

　　before 伪元素可用于在某个元素之前插入某些内容。after 伪类可用于在某个元素之后插入某些内容。这两个伪元素常常只使用content属性，来添加一些短语或排版元素。

  
  

   
   1 
   
   p:before 

   
   2 
   
    
   
   {
   
   

   
   3 
   
     content
   
   :
   
    "Before P"
   
   ;
   
   

   
   4 
   
    
   
   }
   
   

   
   5 
   
   p:after

   
   6 
   
    
   
   {
   
   

   
   7 
   
     content
   
   :
   
    "After P."
   
   ;
   
   

   
   8 
   
    
   
   }
  
  

其实还有一个用法就是用作计数：

Html

　　当然，Firefox支持这两个伪元素；对于IE浏览器，如果已规定 !DOCTYPE，那么 IE8 （以及更高版本）才支持。