CSS3里的常用选择器总结

选择器

      属性选择器:  img[src="data:images/2.jpg"]

              开头匹配:  a[href ^="page/"]    　　        若 a 的 href 属性的属性值以 page/ 开头, 就匹配这个 a 标签.

             结尾匹配:  a[href $="2.html"]    　　     若 a 的 href 属性的属性值以 2.html 结尾, 就匹配这个 a 标签.

             任意匹配:  a[href *="2"]   　　　　     只要 a 的这个属性中出现 "2" 这个字符, 就匹配.

             分组匹配:  div[data-haha ~="box"]    data-haha 中有 "box" 这个属性, 就匹配, 例如: <div data-haha="box box-1"></div>

            短横匹配:  div[data-haha |= "box"]    data-haha 中有 "box-" 开头的字符, 就匹配, 例如: <div data-haha="box box-1"></div>

            有属性匹配:  div[alt]   div 有 alt 这个属性, 就匹配.

      以上选择器都兼容到 IE7, 并且开头的标签不仅限于标签, 也可以类名或 id 开头也可以什么都不写, 只写 [href ^="page/"], 但为了好区分就加上标签, 并且可连续使用:

            div[alt][src^="images"][src*="2"]  有alt属性, src 属性值开头为 images, src 中存在 "2",匹配.

      JQ 也能使用这类选择器但不能有引号, 且兼容 IE6. 

 

--------------------------------------------------------------------------------------------------------

 

      序选择器:  

            p:only-child    p 标签为父级唯一的子级元素时匹配.

            p:first-child    若父级盒子第一个元素为 p , 则匹配, 而不是页面中所有的 p 元素排队的第一个(IE7 兼容).

            p:last-child     若父级盒子最后一个元素为 p , 则匹配, 而不是页面中所有的 p 元素排队的最后一个(IE9 兼容).

            JQ 中也能用, 但 $("p :first") 是页面中所有 p 元素的第一个, 两种写法都 IE6 兼容.

            P:nth-child(n)    作用于所有盒子中的第 n 个 元素且为 p 元素(从1开始), 要选择偶数参数就写 2n, 奇数 2n+1, 可自行调整(IE9 兼容).

            JQ 中, $("p:eq(2)") 选择所有第三个的p,吹哨. $("p:nth-child(3)") 不吹哨.

 

            p:first-of-type:   作用于父级盒子的第一个为 p 的元素(IE9).

            p:last-of-type:   作用于父级盒子的最后一个为 p 的元素(IE9).

            p:nth-of-type(n):   作用于父级盒子的正数第 n 个, 2n为偶数, 2n+1为奇数(IE9).

            p: nth-last-of-type(n):   作用于父级盒子的倒数第 n 个, 2n为偶数, 2n+1为奇数(IE9).

            JQ 也支持这类选择器, 兼容 IE6. 以上的 p 都可以换为基础选择器

 

--------------------------------------------------------------------------------------------------------

 

      节点选择器

            儿子选择器: div>p 选中 div 子级节点中的 p 元素(IE7).

            下一个兄弟选择器: h3+p 选中 h3 后面的为 P 的兄弟元素(IE7), $("div").nextSibling("p").fadeIn() 等价于 $("div+p").fadeIn(), 但选择机理是不同的.  

            后面所有兄弟: h4~p 选中 h4 后兄弟元素中所有的 P 元素(IE7). JQ 中 $("div").nextAll("p").fadeIn() 等价于 $("div~p").fadeIn(), 但选择机理也是不同的.

 

--------------------------------------------------------------------------------------------------------

 

　　以上写出的并不全, 在此抛砖引玉, 有误导之处还请不吝指点 ^^.