前端必须掌握30个CSS3选择器

前端必须掌握30个CSS3选择器

也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手。

本文中将综合前端开发中常用的30个CSS3选择器,并且附带了浏览器的支持情况,希望对大家有所帮助。

1、*:通用元素选择器

* {

margin: 0; padding: 0; }

*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS样式方法

*选择器也可以应用到子选择器中,例如下面的代码:

#container * {

border: 1px solid black; }

这样ID为container 的所有子标签元素都被选中了,并且设置了border。

查看演示

兼容性 IE6+ Firefox Chrome Safari Opera

#ID:ID选择器

#container {

width: 960px; margin: auto; }

ID选择器是CSS中效率最高的选择器,使用的时候要保证ID的唯一性。

查看演示

兼容性 IE6+ Firefox Chrome Safari Opera

.class:类选择器

.error {

color: red; }

类选择器效率低于ID选择器,一个页面可以有多个class,并且class可以放在不同的标签中使用。

查看演示

兼容性 IE6+ Firefox Chrome Safari Opera

X Y:标签组合选择器

li a {

text-decoration: none; }

标签组合选择器也是常用的选择器。

查看演示

兼容性 IE6+ Firefox Chrome Safari Opera

X:标签选择器

a { color: red; } ul { margin-left: 0; }

如果你只是想要页面中的某个标签样式改变,可以选择使用标签选择器。

查看演示

兼容性 IE6+ Firefox Chrome Safari Opera

X:visited and X:link

a:link { color: red; } a:visted { color: purple; }

伪类选择器,最常用的为A标签

查看演示

兼容性 IE7+ Firefox Chrome Safari Opera

X + Y:毗邻元素选择器

ul + p {

color: red; }

毗邻元素选择器,匹配的是所有紧随X元素之后的同级元素Y

查看演示

兼容性 IE7+ Firefox Chrome Safari Opera

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4