CSS

1. ***通用选择器**：选择所有元素，**不参与计算优先级**，兼容性IE6+

2. **#X id选择器**：选择id值为X的元素，兼容性：IE6+

3. **.X 类选择器**： 选择class包含X的元素，兼容性：IE6+

4. **X Y后代选择器**： 选择满足X选择器的后代节点中满足Y选择器的元素，兼容性：IE6+

5. **X 元素选择器**： 选择标所有签为X的元素，兼容性：IE6+

6. **:link，：visited，：focus，：hover，：active链接状态**： 选择特定状态的链接元素，顺序LoVe HAte，兼容性: IE4+

7. **X + Y直接兄弟选择器**：在**X之后第一个兄弟节点**中选择满足Y选择器的元素，兼容性：IE7+

8. **X > Y子选择器**： 选择X的子元素中满足Y选择器的元素，兼容性：IE7+

9. **X ~ Y兄弟**： 选择**X之后所有兄弟节点**中满足Y选择器的元素，兼容性：IE7+

10. **[attr]**：选择所有设置了attr属性的元素，兼容性IE7+

11. **[attr=value]**：选择属性值刚好为value的元素

12. **[attr~=value]**：选择属性值为空白符分隔，其中一个的值刚好是value的元素

13. **[attr|=value]**：选择属性值刚好为value或者value-开头的元素

14. **[attr^=value]**：选择属性值以value开头的元素

15. **[attr$=value]**：选择属性值以value结尾的元素

16. **[attr*=value]**：选择属性值中包含value的元素

17. **[:checked]**：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+

18. **X:after, X::after**：after伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3中::表示伪元素。兼容性:after为IE8+，::after为IE9+

18. **:hover**：鼠标移入状态的元素，兼容性a标签IE4+， 所有元素IE7+

19. **:not(selector)**：选择不符合selector的元素。**不参与计算优先级**，兼容性：IE9+

20. **::first-letter**：伪元素，选择块元素第一行的第一个字母，兼容性IE5.5+

21. **::first-line**：伪元素，选择块元素的第一行，兼容性IE5.5+

22. **:nth-child(an + b)**：伪类，选择前面有an + b - 1个兄弟节点的元素，其中n>= 0，兼容性IE9+

23. **:nth-last-child(an + b)**：伪类，选择后面有an + b - 1个兄弟节点的元素其中n >= 0，兼容性IE9+

24. **X:nth-of-type(an+b)**：伪类，X为选择器，**解析得到元素标签**，选择**前面**有an + b - 1个**相同标签**兄弟节点的元素。兼容性IE9+

25. **X:nth-last-of-type(an+b)**：伪类，X为选择器，解析得到元素标签，选择**后面**有an+b-1个相同**标签**兄弟节点的元素。兼容性IE9+

26. **X:first-child**：伪类，选择满足X选择器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+

27. **X:last-child**：伪类，选择满足X选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性IE9+

28. **X:only-child**：伪类，选择满足X选择器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+

29. **X:only-of-type**：伪类，选择X选择的元素，**解析得到元素标签**，如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+

30. **X:first-of-type**：伪类，选择X选择的元素，**解析得到元素标签**，如果该元素是此此类型元素的第一个兄弟。选中它。兼容性IE9+

JS选择器

原生JS选择器有getElementById、getElementsByName、getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法。

　　1.getElementById(通过ID获取元素)

　　用法:document.getElementById("Id");Id为要获取的元素的id属性值。

　　2.getElementsByName(通过name属性获取元素)

　　用法:document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

　　3.getElementsByTagName(通过元素名称获取元素)

　　用法:document.getElementsByTagName(TagName);TagName为要获取元素的标签名称,当TagName为*的时候表示获取所有的元素,document也可以换成DOM元素,但是这样就只能获取到该DOM元素后面的子集元素。

　　4.getElementsByClassName(通过CSS类来获取元素)

　　用法:document.getElementsByClassName(ClassName);ClassName为要获取元素的CSS类名称,如果要同时获取多个的话,在每个CSS类后面用空格隔开。 如document.getElementsByClassName("class2 class1")就会获取到class1和class2样式的元素,document也可以换成DOM元素,这样也是只能获取到该DOM元素后面的子集元素。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");