css选择器归纳

css常见的选择器

选择器的作用是选中标签，所以下面的选择器都是指标签

*   /*通配符选择器*/
#   /*id选择器*/
.   /*类选择器*/
,   /*分组选择器*/
空格 /*后代选择器*/
>   /*直接后代选择器*/
+   /*相邻兄弟选择器*/
~   /*通用兄弟选择器*/

属性选择器

/*
属性存在选择器
*/
[attr] /*选择包含attr属性的所有元素，不论attr的值*/
/*需要注意的是属性值val是字符串需要用引号引起来*/
[attr=val] /*选择仅包含attr被赋值为val的所有元素*/
[attr~=val]/*选择以val命名的属性元素，并且属性是以空格作为分隔值*/
/*
子串值属性选择器
*/
[attr|=val]/*选择attr属性的值以val（包含val）或者val-开头的元素*/
[attr^=val]/*选择attr属性的值以val开头（包含val）的元素*/
[attr$=val]/*选择attr的值以val结尾（包含val）的元素*/
[attr*=val]/*选择attr属性值中含有字符串val的元素*/

<style>
div[name]{
	border:1px solid
}
</style>
<div>
	<div name="a">1</div>
	<div name="b">2</div>
</div>

伪类选择器

/**
链接伪类  只能作用到链接类的标签元素
*/
:link /*表示作为超链接，指向一个未访问的地址的所有锚*/
:visited/*表示作为超链接，指向一个已被访问的地址的所有锚*/
:target/*代表一个特殊的元素，它的id是URI的片段标识符*/

/**
动态伪类   能作用到所有标签元素
*/
:hover/*选中鼠标悬浮的标签元素*/
:active/*选中点击按住的标签元素*/
:visited
/*会被浏览器记住已经点击过
	visited只有3个属性可以修改
	color  background-color border-color
*/

表单伪类选择器

:enabled/*匹配可编辑的表单*/
:disable/*匹配被禁用的表单*/
:checked/*匹配被选中的表单*/
:focus/*匹配获焦的表单*/

结构性伪类选择器

/* 关于后面index的值说明：
	index的值从1开始计数！！！！
	index可以为变量n(只能是n)
	index可以为even odd
*/
/*选择id=wrap元素标签的子标签中索引是index的表情*/
#wrap ele:nth-child(index)		/*表示匹配#wrap中第index的子元素 这个子元素必须是ele*/
#wrap ele:nth-of-type(index)	/*表示匹配#wrap中第index的ele子元素*/
/* 注意
	:nth-child和:nth-of-type  有一个很重要的区别！
	nth-of-type以元素为中心！就是所有符合条件的第一个标签，标签不同也会被选中
	举例：
		<div id="wrap">
			<div class="inner">div</div>
			<p class="inner">p</p>
			<span class="inner">span</span>
			<h1 class="inner">h1</h1>
			<h2 class="inner">h2</h2>
		</div>
	下面的css会选中上面所有的标签，因为每个标签都只出现一次
		#wrap .inner:nth-child(1){
			border: 1px solid;
		}
*/
:first-of-type  /*元素为中心，第一个出现元素*/
:last-of-type   /*元素为中心，最后一个出现的元素*/
:nth-last-type(index)
:only-of-type   /*选中仅出现一次的元素*/
/* 例如：
    <div>
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<p>4</p>
		<p>5</p>
		<span>6</span>
	</div>
	通过
	div p:nth-last-type(1){
		color:red
	}
	可以选择4所在的标签并且将4的字体设置为红色，相对于nth-child比较宽松的选择元素，
	可以有上面类似的span不需要的元素，而nth-child必须是第一个元素,可能选择不到
	div p:nth-child(1){
		color:red
	}
	则一个也选择不到元素，因为div下面第一个子元素不是p标签
*/
		
/*:nth-child(index)系列	*/		
:first-child  /*第一个元素*/
:last-child   /*最后一个元素*/
:nth-last-child(index)/*最后一个元素*/
:only-child /*(相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))*/


:not()	/*不要选中*/
:empty() /*内容必须是空的，有空格都不行，有属性没关系*/

伪元素选择器

伪元素建议使用双冒号，单冒号也可以使用

::after  /*css生成的虚拟的dom元素（相当于生成的标签）一个元素只能有一个after或before*/
::before

::firstLetter/*选中标签内的第一个字符*/
::firstLine/*选中第一行元素*/
::selection  /*鼠标按住左键选中的内容*/