CSS选择符大全，你学会了吗

1. * test

这个是最常见的通配符，表示匹配所用东西。最常用的

示例

 * {
 margin: 0;  
 padding: 0;
 }

表示取消所有元素的margin和padding

 
 
 

2. # test

id选择器， 配合id使用。
使用时要注意id的唯一性。

• 示例

<div id='test'> <div/>
<style>
 #test{
	border: 1px solid red
}
</style/>

表示给ID为test的元素加一个红色边框
 
 
 

3. .test

类选择器

• 示例

<div class='test'> <div/>
<style>
div.test{
   border: 1px solid red
}
</style/>

表示给class为test的div元素加一个红色边框
 
 
 

4. A B 后代选择器

后代选择器 可以选择指定的所有后代元素

• 示例

#name div {  
  width:100px;  
}

表示id为name的元素的所有后代div宽度都设置为100px

 
 
 

5. A + B 相邻选择符

相邻选择符 选出紧贴着A的B

• 示例

<div> 1	</div>
<p>   2	</p>
<p>   3	</p>
<div> 4 </div>
<p>.  5 </p>

div+p{
 background-color:blue
}

表示所有紧贴着div的p标签，背景色设为红色, 即上面的 2和5 会变红

6. A ~ B 相邻选择符plus

选择紧贴着A的所有兄弟B

• 示例

<div> 1 </div>
<p> 2</p>
<p> 3</p>
<p> 4</p>

<ul> </ul>
<p> </p>

div~p{
	background-color:blue
}

表示2 3 4会变蓝色

7. A > B 后代选择器

后代选择器 选择A的所有直接后代B，就是A的所有儿子

• 示例

<div class='test'> 
 <p>1</p>
 <div> 
 	<p>2</p>
 </div>
 <p>3</p>
 <p>4</p>
</div>

div.class > p{
 background-color:blue
}

表示 类名为test的div的 所有儿子p ,即1,3,4变蓝色

 
 
 

8. A[attr] 属性选择器

• 示例

input[value]{
	width:100px
}

表示含有value属性的input宽度设置为100px

input[value='a']{
	width:100px
}

表示含有value属性并且等于a的input宽度设置为100px

“=” 的一些变形

1. *= A 包含A
   input[class*='test'] *号表示该属性的值必须包含定义的值（即test）
   上述含义是，class含有“test”的input ，比如class=“a-test”， class="testABC"等等

2. ^= A 以A开头
   a[href^='https']， 表示href以https开始的A标签

3. $= A 以A结尾
   a[href^='.jpeg']， 表示href以jpeg结尾的A标签

4. ～=A 某个属性包含A
   <p class='a b c'>1</p>, p标签有三个类分别为a, b, c。当你想描述“选择所有含有a这个类的p标签”，就可以使用上述方法。

   p[class~=a] ，即class包含a的所有p

9. A:nth-child(n) 选择指定子元素

• 示例

div p:nth-child(3){
	border-color:red;
}

表示div的第三个（因为下标从1开始）子元素边框变红

奇数p
div:nth-child(2n+1){
	border-color:red;
}

偶数p
div p:nth-child(2n){
	border-color:red;
}

10. A:nth-of-type(n) 指定元素选择

• 示例

div a:nth-of-type(3){
color：blue
}

表示 div下的 第三个a标签 字体变蓝色

11. A:first-child / A:last-child

字面意思，第一个和最后一个子元素