CSS3新增选择器

div > p   匹配div直接后代为p的元素（孙子后面的不算）

div + p 匹配div后面的邻居为p的元素

div ~ p 匹配div后面的所有邻居为p的元素

[class = ’box’]  匹配具有class属性并且值等于box并且只有这个值的元素

[class ~= ’box’]  匹配具有class属性并且值等于box的元素

[class |= ’box’]  匹配具有class属性并且值等于box或者以box-开头的元素

[src ^= ‘image’] 匹配具有src属性并且值以image开头的元素  模糊匹配

[src $= ‘png’] 匹配具有src属性并且值以png结尾的元素  模糊匹配

[src *= ‘gi’] 匹配具有src属性并且值里面包含gi的元素  模糊匹配

 

伪类选择器

 

个人理解：类型杂乱的时候，用type，因为无视其他元素，找到我需要的元素。

类型差不多的时候，用child，因为我就要选中那个位置的什么元素

li :first - of - type{}   选中li是其父元素的第一个li的元素，无视其他子元素

li : first - child{}     选中其父元素的第一个子元素并且是li元素，不无视其他子元素

li :last - of - type{}   选中li是其父元素的最后一个li的元素，无视其他子元素

li : last- child{}      选中其父元素的最后一个子元素并且是li元素，不无视其他子元素

li : only - of - type{} 选中其父元素只有一个li类型的子元素 ，其他子元素可以多个 但li必须只有一个, 当li有两个以上时无法匹配

li : only - child{}     选中其父元素只有一个li的子元素，独生子，有其他子元素则无法匹配

li : nth-of-type(3){}   选中其父元素里的第三个li元素，无视其他子元素

li : nth-child(3){} 选中其父元素的第三个元素且必须是li元素，不无视其他子元素

li : nth-last-of-type(2){}  其父元素倒数第二个li元素，无视其他子元素

li : nth-last-chile(2){}  其父元素倒数第二个li元素，不无视其他子元素

 

P : first - line{} p元素里的第一行

P : first - letter{} p元素里的第一个字（可以做首字母大写）

P :: selection{} p元素里被选中的文字

P : empty{} 为空的p元素  里面什么都不能有，空格都不能有

P : not(:first-child){} 除了最后一个子元素之外的p  取反

input : enabled{} 所有启用的input元素

input : disabled{} 所有禁用的input元素