在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空 margin 和 padding。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。* 也可以用来选择某元素的所有子元素。
它会选中 #container 下的所有元素。当然，我还是不建议你去使用它，如果可能的话。
- IE6+
- Firefox
- Chrome
- Safari
- Opera
在选择器中使用#可以用 id 来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个 id 来定位它呢？
id选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。
- IE6+
- Firefox
- Chrome
- Safari
- Opera
这是个 class 选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用 class。当你要对某个特定的元素进行修饰那就是用 id 来定位它。
- IE6+
- Firefox
- Chrome
- Safari
- Opera
下一个常用的就是 descendant 选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的 a 元素，而只需要定位li标签下的 a 标签？这时候你就需要使用 descendant 选择器了。
专家提示：如果你的选择器像 X Y Z A B.error 这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。
- IE6+
- Firefox
- Chrome
- Safari
- Opera
如果你想定位页面上所有的某标签，不是通过id或者是‘class’，这简单，直接使用类型选择器。
- IE6+
- Firefox
- Chrome
- Safari
- Opera
我们使用:link这个伪类来定位所有还没有被访问过的链接。
另外，我们也使用:visited来定位所有已经被访问过的链接。
- IE7+
- Firefox
- Chrome
- Safari
- Opera
这个叫相邻选择器。它只会选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。
- IE7+
- Firefox
- Chrome
- Safari
- Opera
X Y 和 X > Y的差别就是后面这个只会选择它的直接子元素。看下面的例子：
#container > ul 只会选中id为‘container’的div下的所有直接ul元素。它不会定位到如第一个 li 下的 ul 元素。
由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在 javascript 中使用 css 选择器时候是强烈建议这么做的。
- IE7+
- Firefox
- Chrome
- Safari
- Opera
兄弟节点组合选择器跟 X+Y 很相似，然后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。
- IE7+
- Firefox
- Chrome
- Safari
- Opera
这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选？那…
- IE7+
- Firefox
- Chrome
- Safari
- Opera
上面这片代码将会把 href 属性值为http://strongme.cn 的锚点标签设置为绿色，而其他标签则不受影响。
这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。
- IE7+
- Firefox
- Chrome
- Safari
- Opera
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
注意我们没有搜索，那是没必要的，因为它都不包含。
那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用下字符。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
这次我们又使用了正则表达式，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以结尾的。但是记住这种写法是不会对和起作用的。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
在回到第8条，我们如何把所有的图片类型都选中呢,,’’,'’？我们可以使用多选择器。看下面：
- IE7+
- Firefox
- Chrome
- Safari
- Opera
给这些元素设置了这个标志之后，我们就可以使用来定位这些标签了。
上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。
兼容性
- IE9+
- Firefox
- Chrome
- Safari
- Opera
根据 CSS3 标准规定，可以使用两个冒号。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。
兼容性
- IE8+
- Firefox
- Chrome
- Safari
- Opera
不用说，大家肯定知道它。官方的说法是.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。
注意旧版本的IE只会对加在锚点标签上的伪类起作用。
通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。
专家提示：;比;要好看很多。
兼容性
- IE6+(IE6只能在锚点标签上起作用)
- Firefox
- Chrome
- Safari
- Opera
伪类是相当有用的，假设我们要把除为之外的所有标签都选中。那上面那么代码就可以做到。
或者说我想选中所有出段落标签之外的所有标签。
- IE9+
- Firefox
- Chrome
- Safari
- Opera
我们可以使用来选中某标签的部分内容，如第一段，或者是第一个字没有。但是记得必须使用在块式标签上才起作用。
伪标签是由两个冒号 组成的。
定位第一个字
上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。
它通常在一些新闻报刊内容的重点突出会使用到。
定位某段的第一行
跟相似，会选中段落的第一行 。
为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如,,,.但是这个兼容对新介绍的特性不起作用。
兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么，有了那日子就一去不复返了。
请注意接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是.
我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用去每隔3个元素获取一次标签。
兼容性
- IE9+
- Firefox3.5+
- Chrome
- Safari
假设你在一个标签中有N多的元素，而你只想获取最后三个元素，甚至是这样，你可以用伪类去代替它。
这个技巧可以很正确的代替第16个TIP，不同的就是它是从结尾处开始的，倒回去的。
兼容性
- IE9+
- Firefox3.5+
- Chrome
- Safari
- Opera
曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。
想象一下有5个标签。如果你只想对其中的第三个进行修饰，而且你也不想使用属性，那你就可以使用伪类来实现了，上面的那个代码，只有第三个标签会被设置边框。
兼容性
- IE9+
- Firefox3.5+
- Chrome
- Safari
同样，也可以类似的使用来倒序的获取标签。
兼容性
- IE9+
- Firefox3.5+
- Chrome
- Safari
- Opera
这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。
假设有个列表，每个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。
兼容性
- IE7+
- Firefox
- Chrome
- Safari
- Opera
跟相反，取的是父标签的最后一个标签。
例如
标签
这里没啥内容，就是一个了 List。
上面的代码将设置背景色，移除浏览器默认的内边距，为每个设置边框以凸显一定的深度。
兼容性
- IE9+
- Firefox
- Chrome
- Safari
- Opera
说实话，你会发现你几乎都不会用到这个伪类。然而，它是可用的，有会需要它的。
它允许你获取到那些只有一个子标签的父标签。就像上面那段代码，只有一个段落标签的才被着色。
上面例子中，第二个不会被选中。一旦第一个有了多个子段落，那这个就不再起作用了。
兼容性
- IE9+
- Firefox
- Chrome
- Safari
- Opera
结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的标签？
使用会选中所有标签。这时候就要使用了。
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
30. X:first-of-type
伪类可以选择指定标签的第一个兄弟标签。
测试
来你把List Item 2取出来，如果你已经取出来或者是放弃了，来继续。
这种情况下，找到下的直接标签，然后找到它的最后一个直接子标签。
解决办法3
我们可以随便玩耍这些选择器。来看看：
先获取到页面上第一个标签，然后找到最后一个子标签。
兼容性
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
如果你想向旧版本浏览器妥协，比如IE6，那你用这些新的选择器的时候还是得小心点。但别让IE6阻止你去学这些新的技能。那你就对自己太残忍了。记得多查查兼容性列表，或者使用Dean Edward's excellent IE9.js script 来让你的浏览器具有这些特性。
第二个，使用向 jQuery 的时候，尽量使用原生的 CSS3 选择器。可能 活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/2157.html