Css伪类选择器之结构伪类、否定伪类篇

伪类选择器

二、结构伪类
      结构伪类是CSS3新设计的选择器，它利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和ID属性的定义，使得文档更加简洁。
      结构伪类有很多种形式，这些形式的用法是固定的，但可以灵活使用，以便设计各种特殊样式效果。结构伪类简单说明如下:

• :fist-child：选择某个元素的第一个子元素
• :last-child：选择某个元素的最后一个子元素
• :nth-child()：选择某个元素的一个或多个特定的子元素
• :nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个字元素开始计算
• :nth-of-type()：选择指定的元素
• :nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算
• :first-of-type：选择一个上级元素下的第一个同类子元素
• :last-of-type：选择一个上级元素的最后一个同类子元素
• :only-child：选择的元素是它的父元素的唯一一个子元素
• :only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素
• :empty： 选择的元素里面没有任何内容

其他结构伪类可参考：“Css3属性选择器与伪类选择器” 页面
三、否定伪类
     :not()表示否定选择器，即排除或者过滤掉特定元素。前面介绍的选择器都是匹配操作，而唯独:not()操作相反，它表示过滤操作，与JQuery中的:not选择器用法相同。
示例：在表单样式设计中，如果为form中所有input元素增加边框样式，但又不希望提交按钮也添加边框，此时就可以使用:not()选择器实现。

input:not([type="submit"]) {border: 1px solid red;}

否定选择器:not()可以帮助用户定位不匹配该选择器的元素，实现匹配操作后的二次过滤。

• IE6~8浏览器不支持:not()选择器