整理的一些css选择器笔记

css选择器 (jQuery选择器)

1) 核心选择器

用法：选择较大范围

1. 标签（元素）选择器

	   div {}
		h1 {}

2. id选择器

	#one {}
		<div id="one">one</div>
		<div id="two">two</div>

3. class选择器

		.first {}
		<div id="one" class="first">one</div>
		<div id="two" class="first">two</div>
		<div id="three" class="first">one</div>
		<div id="four" class="second">two</div>
		<p id="five" class="first">p</div>

4. 并且选择器

		div.first {}
		p#five {}

5. 或者选择器

		div,.first {}

6. 普遍选择器

		* 	

2) 层次选择器【一般不超过5层】

1. 子代选择器

	.top_nav > ul > li
	选中class为top_nav的元素的直接后代ul元素的直接后代li元素

2. 后代选择器

		.top_nav li				

3. 下一个兄弟选择器

		.top_nav li + *

4. 之后所有兄弟选择器

		.top_nav li ~ *

3) 过滤器

对已经选择到的元素进行过滤

1. 属性过滤器

selector[name]	已选择到的元素具有name属性
selector[name=v]	已选择到的元素具有name属性，并且name属性的值为v
selector[name^=v]	已选择到的元素具有name属性，并且name属性的值以'v'开头
selector[name$=v]	已选择到的元素具有name属性，并且name属性的值以'v'结尾
selector[name*=v]	已选择到的元素具有name属性，并且name属性的值中包含了'v'

2. 伪类过滤器

 	以:开头的
		selector:first-child 	过滤出已选择元素中的是第一个孩子的元素
		selector:last-child 	
		selector:nth-child(2)
		selector:nth-child(even)
		selector:nth-child(odd)
		selector:nth-child(3n+1)
		selector:only-child
		selector:not(selector)
		...

		selector:hover
		selector:active
		selector:visited
		selector:focus

3. 伪元素过滤器

		可以产生出来一个虚拟元素（行内元素）
		以::开头的
		div::before {

		}
		div::after {

		}
		<div>
			::before
			<p>one</p>
			<p>two</p>
			::after
		</div>

未完待续。。。