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.