CSS选择器

最近在使用jQuery时大量使用到CSS选择器，除了平时最常用的class、id、属性选择器外，很多选择方式有时候并没有好好灵活运用，所以现在好好理顺一下，加深印象，并以方便今后查找和使用。

1. *

通用选择器，可以用来选择任何元素，也可以选择元素下的任何子元素

*{  margin: 0;  padding: 0;}

#container *{  width: 100px;  height: 100px;}

2. element

标签选择器，element代表标签名，可以选择所有element元素

例：选择所有的<a>标签

a{  display: block;}

3. .class

class选择器，选择class属性相同的所有元素

例：.main 选择class = "main" 的所有元素

.main{  border: 1px solid #ccc;}

p .main{  background-color:#ccc;}

4. #id

id选择器，选择id属性相同的所有元素

例：#main 选择id = "main" 的所有元素

</pre><pre name="code" class="css">#main{  background-color: red;}

<pre name="code" class="css">p #main{  background-color:#ccc;}

5. element[attribute]

属性选择器，选择所有带有attribute属性的元素

例：选择有value属性的所有input元素

input[value]{  }

6. element[attribute = value]

属性选择器

例：选择type=text的所有input元素

input[type="text"]{}

7. element[attribute~=value]

属性选择器，选择属性值中包含指定词为value的元素

例：

8. element[attribute|=value]

属性选择器，选择带有以指定值为value开头的属性值为attribute的元素

例：

9. element,element

组合选择器，用于同时选择多个元素，为不同元素设置相同的样式

div,a,p{  color:red;}

<pre name="code" class="css">.footer ,.header{}

10. element element

后代选择器，选择元素内部的元素

例：选择 <div> 元素内部的每个 <a> 元素

div a{}

11. element1>element2

后代选择器，选择父元素element1的所有子元素element2

例：选择父元素是 <div> 元素的每个 <a> 元素

div > a{}

12. element+element

13.