CSS3新特性(二)选择器

一、基础选择器

1、通配选择器 *

2、元素选择器E

3、ID选择器    #id

4、CLASS.class

5、群组选择器E,F

二、层次选择器

1、后代选择器E F

2、子选择器E>F

3、相邻选择器E+F

4、通用兄弟选择器E~F

三、属性选择器

1、E[attr]选择具有att属性的E元素

2、E[attr="val"]选择具有att属性且属性值等于val的E元素。

3、E[attr~="val"]选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素

(包含只有一个值且该值等于val的情况)。 

4、E[attr^="val"]选择具有att属性且属性值为以val开头的字符串的E元素。

5、E[attr$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素。 

6、E[attr*="val"]选择具有att属性且属性值为包含val的字符串的E元素。 

7、E[attr|="val"]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。

四、伪类选择器

1、动态伪类选择器E:link/E:visited/E:hover/E:active/E:focus

2、目标伪类选择器E:target匹配相关URL指向的E元素

3、语言伪类选择器

4、UI元素伪类选择器

5、结构伪类选择器

E:root匹配E元素在文档的根元素。在HTML中,根元素永远是HTML 

E:first-child匹配父元素的第一个子元素E。 

E:last-child匹配父元素的最后一个子元素E。 

E:only-child匹配父元素仅有的一个子元素E。

E:nth-child(n)匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

E:nth-last-child(n)匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。

E:first-of-type匹配同类型中的第一个同级兄弟元素E

E:last-of-type匹配同类型中的最后一个同级兄弟元素E

E:only--of-type匹配同类型中的唯一的一个同级兄弟元素E

E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E

E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E

E:empty匹配没有任何子元素(包括text节点)的元素E


五、伪元素选择器

1、E:first-letter设置对象内的第一个字符的样式。 

2、E:first-line设置对象内的第一行的样式。

3、E:before设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

4、E:after设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

5、E::placeholder设置对象文字占位符的样式。 

6、E::selection设置对象被选择时的样式。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值