CSS3选择器

css

css共五类选择符，分别是元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符（他么自己以前差不多只用第一类…羞愤），过了css1/2中的，总结下CCS3新增的选择符。

关系选择符

  • 兄弟选择符（E~F）
    e~f
    e~f

    1
    2
    >当指E（第一个）后面（不包含E）所有的兄弟元素F。
    >css2中的E+F两种情况，当E和F相同时，选中的是E后面紧挨着的连续所有F（必须是连续的，F可能不止一个）；当E和F不同时，选中的是E后面紧挨着的第一个F（只有一个）。

  • 属性选择符
    E[att^=”val”]

    1
    指具有att属性且属性值为以val开头的字符串的E元素。

E[att^=”val”]

1
指具有att属性且属性值为以val结尾的字符串的E元素。

E[att*=”val”]

1
选择具有att属性且属性值为包含val的字符串的E元素。

以上几个的栗子:
attrSelector

  • 伪类选择符
    E:not(s)
    1
    匹配不含有s选择符的元素E。s可以使其他任意类型的选择符

E:last-child

1
匹配必须位于父元素下的最后一个位置的子元素E。同理还有css2中的E:first-child，也必须是父元素的第一个子元素，如果第一个元素不是E，那选取失效。

E:only-child

1
匹配必须位于父元素下的唯一一个子元素E,且不能有其他子元素，否则匹配失败。

E:nth-child(n)

1
2
> 首先按元素选择符E定位到E，然后依次判断这些E是否位于父元素的第n个位置上，如果不是，则该E没有被选
> 2n/2n+1可以进行奇偶判定

E:nth-last-child(n)

1
同上的nth-child(),只是顺序是从后往前。

以上几个的栗子:
childSelector

E:first-of-type

1
先根据元素选择符E定位到E，然后检测其是否为第一个E，不是则没有被选中

E:last-of-type
以上几个的栗子:

1
先根据元素选择符E定位到E，然后检测其是否为同辈中最后一个E，不是则没有被选中

E:only-of-type

1
先根据元素选择符E定位到E，然后检测其是否为同辈中唯一一个E，不是则没有被选中

E:nth-of-type(n)

1
先根据元素选择符E定位到E，然后检测其是否为同辈中第n个E，不是则没有被选中

E:nth-last-of-type(n)

1
先根据元素选择符E定位到E，然后检测其是否为同辈中倒数第n个E，不是则没有被选中

typeSelector
E:empty

1
先根据元素选择符E定位到E,检测其有没有任何子元素（包括text子元素），没有则被选中

E:checked

1
选中input type为radio与checkbox时被选中的元素，css手册给出的例子不错，结合了:after伪类

E:enabled/E:disabled

1
选中用户界面上处于可用/不可用（disabled="disabled"）状态的元素E

E:target

1
当a标签的href属性是锚点，且点击该a标签时，该锚点所在的元素被选中

  • 伪对象选择符
    E::selection
    1
    选中被选中的文本，设置其background-color和color，text-shadow(IE11不支持)

看完css选择器，姿势涨了不少，学习还是得系统的看，东一口西一口着实不行。。。