css-选择器大汇总

1、*(清空选择器 / 通用选择符)::兼容性----IE6+、Firefox、Chrome、Safari、Opera

2、#X(ID选择器)::兼容性----IE6+、Firefox、Chrome、Safari、Opera

3、.X(类选择器)::兼容性----IE6+、Firefox、Chrome、Safari、Opera

4、X  Y(后代/descendant选择器)::兼容性----IE6+、Firefox、Chrome、Safari、Opera

5、X::(标签/类型选择器)::兼容性----IE6+、Firefox、Chrome、Safari、Opera

6、X:visited、X:link(伪类选择器)::兼容性----IE7+、Firefox、Chrome、Safari、Opera

7、X+Y(相邻选择器)(直接后继元素)::兼容性----IE7+、Firefox、Chrome、Safari、Opera

8、X>Y(子代选择器)(直接子元素)::兼容性----IE7+、Firefox、Chrome、Safari、Opera

9、X~Y(普通相邻选择器)(后继所有的兄弟元素)::兼容性----IE7+、Firefox、Chrome、Safari、Opera

10、X[title](属性选择器)::兼容性----IE7+、Firefox、Chrome、Safari、Opera

11、X[href="foo"]::兼容性----IE7+、Firefox、Chrome、Safari、Opera

12、X[href*="foo"](指向属性值里包含有foo的元素,如:foo.com或com.foo或stu.foo.dl)::兼容性----IE7+、Firefox、Chrome、Safari、Opera

13、X[href^="href"](指向属性值开头就包含的字符串,如:a[href^="http"])::兼容性----IE7+、Firefox、Chrome、Safari、Opera

14、X[href$="href"](指向属性值结尾就包含的字符串,如:a[href^=".jpg"])::兼容性----IE7+、Firefox、Chrome、Safari、Opera

15、X[data-*="foo"]::兼容性----IE7+、Firefox、Chrome、Safari、Opera

16、X[foo~="bar"]`~`符号可以定位那些某属性值是空格分隔多值的标签::兼容性----IE7+、Firefox、Chrome、Safari、Opera

17、 X:checked(定位那些被选中的单选框和多选框::兼容性----IE9+、Firefox、Chrome、Safari、Opera

18、X:after(X之后添加内容或样式)(当overflow:hidden方法无用时,可使用这个办法,另外样式里可添加clear:both;避免对之后的元素造成影响,必定记住这是个好办法!!!根据CSS3标准,可以用两个冒号::)::兼容性----IE8+、Firefox、Chrome、Safari、Opera

19、X:hover(鼠标滑过起作用,另外旧版本里只有a标签有hover作用)::兼容性----IE6+(IE6只能在锚点标签上起作用)、Firefox、Chrome、Safari、Opera

20、X:not(selector)(取反伪类)(把id为‘container’之外的所有div标签都选中,如:div:not(#container)

::兼容性----IE9+、Firefox、Chrome、Safari、Opera

21、X::pseudoElement(我们可以使用`::`来选中某标签的部分内容,如第一段、第一行、第一个字,如:p::first-line、p::first-letter、p::first-line,旧版本浏览器用一个冒号:,`:first-line`,`:first-letter`,`:before`,`:after`。::兼容性----IE6+、Firefox、Chrome、Safari、Opera

22、X:nth-child(n)(n从1开始顺着数,还可以写成`li:nth-child(4n)`去每隔3个元素获取一次标签)::兼容性----IE9+、Firefox3.5+、Chrome、Safari

23、X:nth-last-child(n)倒着数回去::兼容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

24、X:nth-of-type(n)(有5个`ul`标签。如果你只想对其中的第三个进行修饰,如:ul:nth-of-type(3)::兼容性----IE9+、Firefox3.5+、Chrome、Safari

25、X:nth-last-of-child(n)倒着数回去::兼容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

26、X:first-child::兼容性----IE7+、Firefox、Chrome、Safari、Opera

27、X:last-child::兼容性----IE9+、Firefox、Chrome、Safari、Opera

28、X:only-child(获取只有一个子标签的父标签)::兼容性----IE9+、Firefox、Chrome、Safari、Opera

29、X:only-of-type定位某标签只有一个子标签的目标::兼容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

30、X:first-of-type(指定标签的第一个兄弟标签::兼容性----IE9+、Firefox3.5+、Chrome、Safari、Opera


手码的,有错误望帮忙指正!!!
来源于http://www.w3cschool.cn/css/css-selector.html













评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值