前端的选择器

常用的选择器

元素选择器

作用：通过元素选择器，可以选中页面中所有指定的元素

语法：标签名{ }

例如：为页面中所有的p元素，设置一个字体颜色

p{
color :red;
}

id选择器

作用：用过元素的id属性值选中唯一的一个元素

语法：#id属性值{ }

例如：为id属性值为p1的元素设置一个字体颜色

#p1{
color :red;
}

类选择器

作用：通过元素的class属性值选中唯一的一组元素

语法：.class属性值{ }

例如：为class属性值为p2的元素设置一个字体颜色

选择器分组

作用：通过选择器分组同时选中多个选择器对应的元素

语法：选择器1，选择器2，选择器N{ }

例如：为id为p1，class为p2的元素，还有h1同时设置一个字体颜色

p1,p2,h1{
    color :red;
}

通配选择器

作用：可以用来选择页面中的所有元素

语法：*{ }

例如：为页面中所有元素的字体设置一个颜色

*{
    color:red;
}

复合选择器（交集选择器）

作用：可以同时满足多个选择器的元素

语法：选择器1，选择器2，选择器3{ }

例如：为用于class属性值为p3的span元素设置一个字体颜色

span.p3{ 
    color:red;
}

属性选择器

作用：可以根据元素的属性或者属性值来选取指定元素

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

例如：为所具有title属性的p元素，设置一个背景颜色

p[title]{
color:red;
}

伪类选择器

什么是伪类：伪类专门用来表示元素的一种特殊的状态，比如：访问过得超链接、普通的超链接、获取焦点的文本框，当我们需要为处在这些状态的元素设置样式时，就可以使用伪类。

:link - 表示普通的链接（没访问的链接）

例如：为没有访问的链接设置一个颜色

a:link{
    color :red;
}

:visited    -表访问过得链接（浏览器是通过历史记录来判断一个链接是否被访问过，由于涉及到用户的隐私问题，所有使用visited伪类只能设置字体的颜色）

例如：为访问过得链接设置一个颜色

a:visited{
    color :red;
}

:hover    -表示鼠标移入的状态

例如： 

a:hover{
    color:red;
}

:active   -表示超链接被点击的状态

a:active{
    color:red;
}

注意：:hover和：active也可以为其他元素设置，IE6中不支持对超链接以外的元素设置：hover和：active

文本框获取焦点以后，修改背景颜色

input：focus{
    background-color:red;
}

伪元素：可以使用伪元素来表示元素中的特殊位置

为p中的第一个字符设置一个颜色

p:first-letter{
    color:red;
}

为p中的第一行设置一个背景颜色

p:first-line{
    background-color:red;
}

元素之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的子元素

祖先元素：直接或间接包含后代的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫兄弟元素

后代元素选择器

作用： 选中指定元素的指定后代元素

语法：祖先元素 后代元素{ }

例如：为id为d1的div元素中的span元素设置一个字体颜色

#d1 span {
	color: purple;
			}

选中id为d1的div中p元素的span元素

#d1 p span {
    color:red;
}

子元素选择器

作用：选中指定父元素中的子元素

语法：父元素>子元素

例如：为div的子元素span设置一个字体颜色

div>span {
    color:red;
}

first-child     可以选中第一个子元素

last-child     可以选中最后一个子元素

nth-child（）  可以选中任意位置的子元素， even 表示偶数位置的子元素， odd 表示奇数位置的子元素       

兄弟元素选择器

后一个兄弟选择器

作用：可以选中一个元素后紧挨着的指定的兄弟元素

语法：前一个+后一个

例如：为span后的一个p元素设置一个字体颜色

span+p{
    color:red;
}

选中后边的所有兄弟元素

语法： 前一个~后边所有

span~p{
				background-color: red; 
			}

否定伪类

作用：可以从已选中的元素中剔除某些元素

语法：not（选择器）

例如：为所有p元素设置一个字体颜色，除了class值为hello的

not(.hello){
    color:red;
}

以上就是近期所学到的前端的选择器，若发现有误，请留言，不喜勿喷