2 css选择器

CSS 属性选择器
	通过属性来选择元素
 #intro {font-weight:bold;}//id选择器				
		[title]{ color:red; }//选择有title属性的所有元素			
		[title=W3School]{ color:red; }//选择title=W3School属性的所有元素				
		[title~=hello] { color:red; }//选择title包含hello的所有元素，hello前后必须有空格		
		[title|=hello] { color:red; }//选择title包含hello的所有元素，hello后必须有——	
		[title*=hello]{ color:red; }//选择title包含hello的所有元素	
		[title^=hello]{ color:red; }//选择title以hello开头的的所有元素
		[title$=hello]{ color:red; }//选择title以hello结尾的所有元素
		input[type="text"]//选择type=text的所有input元素
 a[href][title] {color:red;}//根据多个属性进行选择
 planet[moons="1"][title="W3School"] {color: red;}//根据多个属性值进行选择

通配符选择器
		* {color:red;}//与任何元素匹配
		

多个选择器
	多个选择器一起写，用“，”隔开，相当于或的关系
	.important.warning {background:silver;}//多个类选择器是and的关系，即要包含important也要包含warning
	<p class="important warning">
			This paragraph is a very important warning.
	</p>


层级选择器
	通过上下文关系来选择元素，父子，兄弟，祖先
	
	CSS 后代选择器
		li strong {
			font-style: italic;
			font-weight: normal;
		}
		CSS 相邻兄弟选择器
			结合符是“+”
			h1 + p {margin-top:50px;}	
			
	CSS 子元素选择器
		h1 > strong {color:red;}//元素下的第一个元素叫子元素
  
			


CSS 伪类 (Pseudo-classes)
		辅助选择元素
		修饰选择器，用冒号表示
		selector : pseudo-class {property: value}
		selector.class : pseudo-class {property: value}
		锚伪类
			a:link {color: #FF0000}		/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 点击时的样式*/
			
			a.red : visited {color: #FF0000}
			p:first-child {font-weight: bold;}//元素下的首个子元素p	
				first-child
				last-child
				nth-child（1）|（2n）|(2n-1)|(odd/even)
				nth-last-child（1）|（2n）|(2n-1)|(odd/even)
CSS 伪元素 (Pseudo-elements)
		辅助选择元素
		修饰选择器，用冒号表示
		selector:pseudo-element {property:value;}
		selector.class:pseudo-element {property:value;}
		p:first-line  {color: #FF00FF} //首行
		p:first-letter{color: #FF00FF} //首字母
		p.article:first-letter{color: #FF00FF}
		CSS2-before 伪元素
			":before" 伪元素可以在元素的内容前面插入新内容
			h1:before{content:url(logo.gif);}
		CSS2 - :after 伪元素
			":after" 伪元素可以在元素的内容之后插入新内容。
			h1:after{content:url(logo.gif);}