css3 新增内容-选择器

css3 新增内容

目录

• 属性选择器
• 结构性伪类
• 其他伪类
  
  
  

属性选择器

E[attr]

只使用属性名，但没有确定任何属性值

代码实例

li[data-img]{
    background: #ddd;
}

代码解析

• 选择有data-img属性的li元素, 改变其背景.
  
  

E[attr=”value”]

指定属性名，并指定了该属性的属性值

代码实例

li[data-img="1.jpg"]{
    background: #ddd;
}

代码解析

• 选择data-img属性值为”1.jpg”的li元素, 改变其背景.
  
  

E[attr~=”value”]

指定属性名，并且具有属性值，此属性值是一个词列表，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

代码实例

li[data-img~="1.jpg"]{
    background: #ddd;
}

E [attr^=”value”]

指定了属性名，并且有属性值，属性值是以value开头的

代码实例

li[data-img^="1.jpg"]{
    background: #ddd;
}

结构性伪类

E :nth-child(n)

表示E元素的第n个子节点（从 1 开始）
参数也可以是一个表达式，2n+1 -> 匹配第奇数个子元素，n 从 0 开始

代码实例

ul :nth-child(1){
    background: #ddd;
}

代码解析

• 选择ul中第一个子元素, 改变其背景
  
  

E:nth-of-type(n)

表示E元素的第n个节点，且类型为E

代码实例

ul div:nth-of-type(1){
    background: #ddd;
}

代码解析

• 选择ul中第一个div, 改变其背景
  
  

E :nth-last-child(n)

表示E父元素中的第n个子节点，从后向前计算

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

表示E元素中的第n个字节点，且类型为E , 从后向前计算

E :first-child

表示E父元素中的第一个子节点

E :last-child

表示E父元素中的最后一个子节点

E C:first-of-type

表示E父元素中的第一个子节点且节点类型是C的

E C:last-of-type

表示E父元素中的最后一个子节点且节点类型是C的

其他伪类

E::before

生成内容在E元素前

E::after

生成内容在E元素后

E:not(selector)

表示匹配E元素中除了 selector 的元素