关于CSS中的选择器

选择器的使用

• 标签选择器：标签名{}

 div{
 	width:200px;
 }

• 类选择器：.类名{}
  class=’’ 可以有多个取值“

.class{
	width="200px;"
}

• id选择器：#id名{唯一的id名}

#id{
	width="200px;"
}

• 普遍选择器/通配符选择器：*{}

*{
	padding:0px;
}

• 后代选择器：选中的是所有的后代元素

div *{
			选中的是ul和li
		}
		

<div>
	<ul>
		<li></li>
	</ul>
</div>

• 子代选择器：选中只有直接子元素

 div > *{
			ul
}

<div>
		<ul>
			<li></li>
		</ul>
	</div>

• 一般同胞选择器 ：~ 选中的是 本身 之后的所有 兄弟节点
• 相邻同胞选择器 ：+ 选中和自己 相邻的 下一个 兄弟节点

 one+div{
			谁也选不中
}

<div></div>
<div class="one"></div>
<p></p>
<div></div>

• 交集选择器 / 组合选择器

div.one{
		是div，还有class=“one”
	}

• 并集选择器 / 多选择器

div,.one,#oid{
		
	}

• 属性选择器

   	[attr]	选中带有attr属性的节点
   	[attr=val]	选中带有attr属性，并且值为val
   	[attr^=val]	选中带有attr属性，并且值以val开头
   	[attr$=val]	选中带有attr属性，并且值以val结尾
   	[attr*=val]	选中带有attr属性，并且值包含val
   	[attr~=val]	选中带有attr属性，并且值包括val
  

• 伪类选择器

> 		:first-child
> 		:last-child 		
> 		:only-child 
> 		:nth-child(n)序号/特殊字符
> 
> 		:nth-last-child 
> 		:first-of-type
> 		:last-of-type
> 		:nth-of-tyoe(n)序号/特殊字符
> 
> 		:hover 
> 		:link 
> 		:active 
> 		:visted
> 
> 		:focus 
> 		:invalid 
> 		:valid 	
>  		:checked
>  		:default 	
>  		:in-range
> 		:out-of-range 	
>  		:required 	
>  		:enabled 	
>  		:disabled

• 伪元素选择器

::after
::before
::first-letter
::first-line
::selection

• 权重值
  1000 — 行内样式
  100 — id选择器
  10 — 类选择器、属性选择器、伪类选择器
  1 — 标签选择器、伪元素选择器

div>.one:first-child::after{
		权重22
}
/* 不能越级 */