HTML---------css选择器

HTML

css入门

三要素：

			1) html (网页骨架) 	块 ，行 （table/form）
			2) css（页面装饰，布局，动画过渡效果）
				原则：对于动画效果能用css实现的绝对不用js
			3) Javascript（树莓派）
				动态DOM, 类似于jstl
				数据交互

如何在html中使用css(3种方式)

			1) 嵌入在标签内部
					将css代码写在了html中，较为混乱
					复用性较低

					好处：优先级高，简单直接（修改别人代码的时候，weex rn）
			2) 集中嵌入在style标签中
					
			3) 将css独立写在外部的css文件中，并且通过link导入进来
				适用于企业级开发

css语法

			选择器 {
				/*规则*/
				color:#ffffff;
				background-color:pink;
			}

css选择器

1.核心选择器

选择较大范围
 	1. 标签（元素）选择器
		div {}
		h1 {}
	2. id选择器
		#one {}
		<div id="one">one</div>
	3. class选择器
		.first {}
		<div id="one" class="first">one</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) 过滤出已选择元素中的是第二个孩子的元素，可以是1，3.，4...
		selector:nth-child(even) 过滤出已选择元素中的偶数孩子元素
		selector:nth-child(odd) 过滤出已选择元素中的奇数孩子元素
		selector:nth-child(3n+1) 过滤出已选择元素中的第3n+1个孩子元素，n=1,2,3...，表达式可以换，如：2n，2n+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>