【css选择器】快速学习教程

隐心

css选择器，选取元素对象 非常 灵活、方便、强大。js想要获取元素对象(DOM对象)进行操作，就得通过选择器来获取，css选择器就是首选，当然XPath也是可以，但没有css选择器强大，我来给大家介绍下css选择器。

css选择器主要分为以下几种：
1、id选择器，2、类(class)选择器，3、属性选择器，4、元素(标签/TAG)选择器。
4种选择器可以随意组合，不管何种情况都可以选取到想要的元素，下面我们拿个网页元素例子来说明：



看上图，假如我们要选取这个超链接元素，可用的方式有：

• document.querySelector("[id='3'] h3 a")，这里用到的选择器有：属性选择器 + 元素(标签/TAG)选择器 ，且是通过 父元素 来定位到它的子元素，可以将ID也作为属性选择器。
  
• document.querySelector("#\\33  h3 a")，这里用到的选择器有：ID选择器 + 元素(标签/TAG)选择器 ，且是通过 父元素 来定位到它的子元素，ID选择器，在ID值前面加上‘#’即可，注意：\\33后面有两个空格，不能少，因为数字开头的ID，使用ID选择器时，需要在前面加上 \\3，然后第1个数字后面需要有一个空格，如果是字母开头的ID值，就不需要在前面加\\3。
  
• document.querySelector("#\\33 >h3>a")，这个与第2个相似，只是上下级之间把‘空格’换成了‘>’，‘>’代表指向它的儿子（直接子级），如果不是‘>’，而是‘空格’，代表指向它的所有子类、孙子类、等等无限下级都可以，这里要区分好。
  
• document.querySelector(".result.c-container.new-pmd:nth-child(5) h3 a")，这里用到的选择器有：类选择器 + 元素(标签/TAG)选择器 ，且是通过 父元素 来定位到它的子元素，我们可以看到元素上的class属性值是"result c-container new-pmd"，中间有空格，代表多个class项，使用class选择器时，需要用‘.’进行连接，且最前面加上‘.’，所以就是“.result.c-container.new-pmd”，但是由于class在页面元素中是可以重复的，这样选取会存在多个，所以可以使用 :nth-child(index) 来指定选取第几个元素，注意：这里的索引[index]不是指“.result.c-container.new-pmd”选取到的所有项的索引，而是指的“.result.c-container.new-pmd”这些元素在它父类中的第几个元素的索引，从1开始。
  
• document.querySelectorAll(".result.c-container.new-pmd h3 a")[2]，这个跟第4点差不多，只是把 :nth-child(index)  换了个方式，使用querySelectorAll取到所有相同项数组，然后再取数组项里的元素，索引从0开始。
  
• document.querySelector("[srcid^=\\31 5]:nth-child(5) >h3>a")，这里用到的选择器有：属性选择器 + 元素(标签/TAG)选择器 ，且是通过 父元素 来定位到它的子元素，这里可以看到，使用了个‘^’符号，这个符号代表以什么字符开头，这里元素上 srcid="1599"，假如 15是固定的，后面的99是动态变化的，那么就可以使用这种动态匹配的方式，模糊匹配包括以下几种：
  6.1 ‘^=’ 是否以指定字符开头。
  6.2 ‘$=’ 是否以指定字符结尾。
  6.3 ‘*=’ 是否包含指定字符。
  6.4 ‘~=’ 是否包含指定词汇，与6.3类似。
  6.5 ‘|=’ 是否以指定词汇开头，必须是完整词。
  
  

根据图上的超链接元素，我们大概可以用以上6+种方式来选取，还可以更多，不再一一列举，基本都是换几种选择器组合方式，所以说css选择器太灵活太强大了。大家只要把上面列的4中选择器灵活组合，就可以选取到任意元素对象。

xinyuanzi393

谢谢分享。

zidoo

从楼主的模块寻到这里，太好了，正想学习CSS

核心力量小超人

学到了，谢谢大神

小王叔叔

感谢楼主，在这儿正一脸懵，您的猫头鹰填表也还没学会。

核心力量小超人

开源很累，给房主一个赞！！！！！

♂隐

我没看懂····咋办···

2421

好厉害！！