内容发布更新时间 : 2024/10/23 10:28:49星期一 下面是文章的全部内容请认真阅读。

前端必须掌握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