css选择器总结

一、选择器的种类

/*一、通用（通配符）选择器*/

*{
padding:0;
margin: 0;

}

/*拓展,只选择.mian 下面的元素*/

<pre name="code" class="css">.main *{
padding:0;
margin: 0;

}

/*二、类选择器*/

.main{
width: 100%;
height: 800px;
background: white;

}

/*三、id选择器，主要获取页面唯一的元素*/

#testImage {
font-size: 20px;

}

/*四、标签选择器，各种html标签选择器*/

ul{
width: 250px;
height:800px;
list-style: none;
margin: 50px;
background: tan;
float: left;

}

*五-1、同级选择器，选择紧跟在ul后面的li标签,是后面的多个ul*/

ul+ul{
color: #229622;
background-color:yellow;
}

/*五-2、同级选择器，选择紧跟在ul后面的li标签,同父亲下的多个ul*/

ul~ul{
color: #229622;
background-color:yellow;
}

/*六、后代选择器又叫包含选择器，效率高于 ul .class,  浏览器是从右向左 一级一级的查找元素，它查找的是不管有多少级全部找出来*/

ul li{
display: inline-block;
}

/* 七、子代选择器，选择前面父对象下面的所有的子对象元素，只限为一级*/

.testHouDai > li{
border: 10px solid red;
}

/*八、群组选择器，各个类对象之间有用逗号隔开的，这个组之间的所有对象都有这些样式*/

.main,content{
background: black;
color: blue;
border:1px solid green;
}

/*九、后代选择器，选择孙子代及其以后的所有的p标签*/

ul * p{
color: red;
font-size: 50px;
}

/*十、伪类选择器*/

.thisA > a:hover{
color: black;
font-size: 24px;
width: 50px;
cursor: pointer;
height: 50px;
background-color: red;
}

/*十一、属性与值选择器，通过属性选定一个元素
E[att^="val"] 、E[att$="val"] 、E[att*="val"]
*/

form[name="nameForm"]{
color:red;
}

/*十二、属性选择器，选择匹配到有type属性的所有元素*/

[type] {
color:red;
font-size: 50px;
}

二、选择器的优先级

1、首先要说的是！important，它的样式会先被使用，不管在哪里都是这样（100%），当然在IE中，！importantIE6及以下不能识别，由此可以专门为ff设置自己想要的样式, div{color:red !important; color:blue;} 在IE中为 div{color:blue !important;} div{color:red;}

2、那先在比较下同级的选择器之间的使用优先级
直接在标签中的设置样式（优先级：1000）   ------》  ID选择器
（优先级：100） -----》类选择器（级别为10）-----》标签选择器（级别是 1）

其他的样式组合通过这个计算就可以了：  比如 后代选择器
 .divClass  span { color:Red;}   优先级别是10+1=11

3、总结：使用的优先级原则有三点:一选择可以准确的找到要控制的标签；二使用最合理的优先级的选择器；三还要是html和css看起来简洁美观可读性强。