CSS3选择器

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选择器,姿势涨了不少,学习还是得系统的看,东一口西一口着实不行。。。