css常用选择器

选择器分类

并集
span,.class {

}
交集
span .class {

}

元素选择器

p {

}

id选择器

#id {

}

类选择器

.class {

}

后代选择器

父元素 > 子元素 {

}

伪类选择器

/*
			 * 为没访问过的链接设置一个颜色为绿色
			 * 	:link
			 * 		- 表示普通的链接（没访问过的链接）
			 */
			a:link{
				color: yellowgreen;
			}
			
			/*
			 * 为访问过的链接设置一个颜色为红色
			 * 	:visited
			 * 		- 表示访问过的链接
			 * 
			 * 浏览器是通过历史记录来判断一个链接是否访问过,
			 * 	由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
			 * 
			 */
			a:visited{
				color: red;
			}
			
			/*
			 * :hover伪类表示鼠标移入的状态
			 */
			a:hover{
				color: skyblue;
			}
			
			/*
			 * :active表示的是超链接被点击的状态
			 */
			a:active{
				color: black;
			}
			
			/*
			 * :hover和:active也可以为其他元素设置
			 * IE6中，不支持对超链接以外的元素设置:hover和:active
			 */
			/*p:hover{
				background-color: yellow;
			}
			
			p:active{
				background-color: orange;
			}*/
			
			/*
			 * 文本框获取焦点以后，修改背景颜色为黄色
			 */
			input:focus{
				background-color: yellow;
			}

伪元素

/*
			 * 为p中第一个字符来设置一个特殊的样式
			 */
			
			/*p:first-letter {
				color: red;
				font-size: 20px;
			}*/
			/*
			 * 为p中的第一行设置一个背景颜色为黄色
			 */
			
			/*p:first-line {
				background-color: yellow;
			}*/
			
			/*
			 * :before表示元素最前边的部分
			 * 	一般before都需要结合content这个样式一起使用，
			 * 	通过content可以向before或after的位置添加一些内容
			 * 
			 * :after表示元素的最后边的部分
			 */
			p:before{
				content: "我会出现在整个段落的最前边";
				color: red;
			}
			
			p:after{
				content: "我会出现在整个段落的最后边";
				color: orange;
			}

属性选择器

			 *      [属性名="属性值"] 选取含有指定属性值的元素
			 * 		[属性名^="属性值"] 选取属性值以指定内容开头的元素
			 * 		[属性名$="属性值"] 选取属性值以指定内容结尾的元素
			 * 		[属性名*="属性值"] 选取属性值以包含指定内容的元素

子元素选择器

:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
		该选择器后边可以指定一个参数，指定要选中第几个子元素
		even 表示偶数位置的子元素
		odd 表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
		和:first-child这些非常的类似，
		只不过child，是在所有的子元素中排列
		而type，是在当前类型的子元素中排列

否定伪类

可以从选择的元素中删除某个元素

:not(.class) {
}