前端必须掌握30个css3选择器.docxVIP

前端必须掌握 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 X 元素之后的同级元素 Y 查看演示 兼容性 IE7+ Firefox Chrome Safari Opera X Y ：子元素选择器 div#container ul { border: 1px solid black; } 匹配 #container 下的所有子元素。 关于 XY 和 X Y 的区别请看下面的 html 实例： div id=container ul li List Item ul li Child /li /ul /li li List Item /li li List Item /li li List Item /li /ul /div 选择器 #container ul 只会匹配到第一个 UL ，也就是 #container 的子元素 UL ，而不是 li 里面 的 ul ，但是 div ul 则可以匹配到所有 DIV 里面的 ul 。 查看演示 兼容性 IE7+ Firefox Chrome Safari Opera X ~ Y： ul ~ p { color: red; } 匹配任何在 X 元素之后的同级 P 元素。也就是选择了 UL 之后的同级所有的元素。 查看演示 兼容性 IE7+ Firefox Chrome Safari Opera X[title] ：属性选择器 a[title] { color: green; } 匹配具有某属性的标签，例如实例中是匹配具有 title 属性的 a 标签。 查看演示 兼容性 IE7+ Firefox Chrome Safari Opera X[href=foo] a[href= http://js8.in] { color: #1f6053; /* nettuts green */ href= http://js8.in} 也属于属性选择器，匹配属性中为某个值的标签。例如实例中匹配的为 的 a href= http://js8.in 查看演示 兼容性 IE7+ Firefox Chrome Safari Opera X[href*=nett