CSS常用选择器

元素选择器

通过元素选择器可以选择页面中所有指定元素

语法：标签名{ }
p{
	color:red;
}

id选择器

通过元素的id属性值选中唯一的一个元素

语法：#id属性值{ }
#home{
	font-size:20px;
}

类选择器

通过元素的class属性值选中一组元素

语法：.class属性值{ }
.car{
	color:blue;
}

通配选择器

可以选中页面中的所有元素

语法：*{ }
*{
	margin:0;
}

交集选择器

可以选中同时满足多个选择器的元素

语法：选择器1选择器2……选择器n{}
span.p3{
	background-color:yellow;
}

在此之前，先普及一下元素之间的关系

元素之间的关系：

祖先元素 – 直接或间接包含后代元素的元素。

后代元素 – 直接或间接被祖先元素包含的元素。

父元素 – 直接包含子元素的元素。

子元素 – 直接被父元素包含的元素。

兄弟元素 – 拥有相同父元素的元素。

后代选择器

选中指定元素的指定后代元素

语法：祖先元素后代元素{ }
div span{
	color:green;
}
div span p{
    font-size:50px;
}

子代选择器

IE6以下不支持子代选择器

选中指定父元素的指定子元素

语法：父元素 > 子元素{ }
div > span{
	color:red;
}

子元素选择器

:first-child

选择第一个子元素
p:first-child{
	background-color:red;
}

:last-child

选择最后一个子元素
p:last-child{
	background-color:red;
}

:nth-child(N)

选择任意位置的子元素

/*表示选择p元素第三个元素*/
p:nth-child(3){
	background-color:red;
}

:nth-child(even)

选择偶数位的子元素
p:nth-child(even){
	background-color:red;
}

:nth-child(odd)

选择奇数位的子元素
p:nth-child(odd){
	background-color:red;
}

:first-of-type

选择某类元素下的第一个子元素
p:first-child-type{
	color:yellow;
}

:last-of-type

选择某类元素下的最后一个子元素
p:last-child-type{
	color:yellow;
}

:nth-of-type()

选择某类元素下的任意子元素

/*选择所有p元素中的第二个P元素*/
p:nth-of-type(2){
	color:yellow;
}
/*选择所有p元素中的双数位P元素*/
p:nth-of-type(even){
	color:yellow;
}
/*选择所有p元素中的奇数位P元素*/
p:nth-of-type(odd){
	color:yellow;
}

兄弟元素选择器

兄弟元素 + 兄弟元素{ }

查找后边一个兄弟元素
span + p{
	color:green;
}
兄弟元素 ~ 兄弟元素{ }

查找后边所有的兄弟元素
span ~ p{
	color:green;
}

选择器的优先级

当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时候样式之间产生了冲突，最终采用哪个选择器定义的样式，由选择器的优先级（权重）决定

优先级规则：

内联样式，优先级 1000

id选择器，优先级 100

类和伪类，优先级 10

元素选择器，优先级 1

通配 * ，优先级 0

继承的样式，无优先级
/*内联样式*/
<span style="color:red;" class="s" id="s1"></span>
/*id选择器*/
#s1{
    color:red;
}
/*类选择器*/
.s{
	color:red;
}
/*元素选择器*/
span{
	color:red;
}
/*通配选择器*/
*{
	color:red;
}

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较

注意：选择器优先级计算不会超过他的最大数量级

/*优先级 100*/
#s1{
    color:red;
}
/*优先级 1 + 100*/
span#s1{
    color:yellow;
}

如果选择器优先级一样，则采用靠后的样式

/*将采用后面这个p2的样式*/
.p1{
    color:red;
}
.p2{
    color:yellow;
}

/*将采用后面这个p1的样式*/
.p2{
    color:yellow;
}
.p1{
    color:red;
}

!important

可以样式最后加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式，甚至超过内联样式，但是在开发中尽量避免使用important

.p1{
    color:red;!important;
}