具体分css2选择器和css3选择器两大类
第一大类:css2选择器，具体分类如下:
一、基础选择器
1. 标签选择器
标签名作为选择器
p {
color: red;
font-size: 22px;
}
h2 {
font-size: 36px;
}
用途：批量处理 或设置或清空默认样式
2. id选择器
#id值 {
k:v;
k:v
...
}
对id选择器的认识:
第一， 每个标签都有id属性，id属性值由字母开头，后面可以为数字 下划线 横线 比如demo test w40 text-center
第二， id在页面中是唯一的
第三，劣势 对多个元素设置统一样式 需要起多个id，写多次重复的样式
3. 类选择器
.class值 {
k:v;
k:v;
...
}
对clas类选择器的认识
第一， class属性值不是唯一的,不同的标签可以取相同的class名
第二， 类选择器作用，可以用类选择器去选中一部分样式相同的标签
第三， 一个标签的class值是可以有多个，多个类之间用空格隔开
第四，与id选择器区别
id属性一般用于js 类用于设置样式
"类上样式 id上行为"
4. 通配符选择器
* 代表所有标签
通配符选择器的效率比较低，在实际项目中不再使用
* {
padding: 0;
margin: 0;
}
淘宝 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
京东 * {margin:0;padding:0}
二， 高级选择器（配合之前的标签、id、class综合运用）
1. 后代选择器
div div p {
color:red;
}
2. 交集选择器
交集 表示既要满足条件1又要满足条件2（因为不同的标签可以取相同的class名）
p.demo {
}
div p.demo {
}
3. 并集选择器
选中多个标签
选择器用逗号隔开
应用场景
# 多个标签样式相同，一个选择器选不玩
div,p,ul { k:v;k:v}
# 设置页面整体的默认样式
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
第二大类: css3选择器
一， 关系选择器
> 亲儿子 .box>p IE7开始兼容
+ 下一个兄弟 IE7开始兼容
~ 后面所有兄弟
* 等价于jquery的方法表示： （注意jq支持css3选择器的用法）
$("div>p") === $("div").children("p") // 表示div的亲儿子p
$("div+p") === $("div").next("p") // div的后面的第一个兄弟
$("div~div") === $("div").nextAll("div") // div后面的所有兄弟
IE6兼容（由于目前市场最低版本的浏览器为IE6，故无兼容问题）
* >+（儿子选择器和相邻兄弟选择器）表示选择紧接在第一个儿子元素后的所有兄弟元素，而且这些儿子元素有相同的父元素
案例:
<div class="row">
<div class="top-bar-1 col-md-2">
<a href="">
<i class="icon-phone"></i>
<span>关注微信号</span>
<span class="caret"> </span>
<img src="imgs/ewm_xzh.jpg" alt="xuzhihua" width="130">
</a>
</div>
<div class="top-bar-2 col-md-5">
<i class="icon-tel"></i>
<span>8888-555-6666（服务时间：9:00-21:00）</span>
</div>
<div class="top-bar-3 col-md-2">
<a href="">校企合作</a>
<a href="">培训师</a>
</div>
<div class="top-bar-4 col-md-3">
<a class="btn btn-default" role="button">免费注册</a>
<a class="btn btn-default" role="button">免费注册</a>
</div>
</div>
#lk_header .top-bar .container .row>div+div{
border-left:1px solid #e0e0e0;//左边框
}
二， 属性选择器
1）img[src="images/2.png"]{ }
2）img[alt="11"]{ }
3) img[kaola="你"]{ } //允许自定义属性，并赋值
4）[alt="11"][kaola="我"]{ ) //对标签无要求，必须是两个属性及属性值同时成立
扩展；
案例:
/* input[type="button"]{
background-color: green;
} */
/* [value]{
background-color: green;
} */
[type]{
background-color: green;
}
<input type="button" value="按我"/>
5） p[class^="para"]{ } //p元素，且属性值以para开头
6）p[class$="2"]{ } // 以2结尾
7）p[class*="a"]{ } // 只含有a
8）p[class|="para"]{ } 以para-开头
9）div[class="haha"]{ }
//由于class有多个属性值，故分两种情况：有多个属性值，有一个值为haha。或者仅有一个属性值且为haha
10）$("div[class=haha]"){ }
// 属性值加单引号或者不加，因为双引号不能嵌套，注意css属性选择器转化为jq的写法，只需放到$("")内即可
/* input[type="button"]{
background-color: green;
} */
/* [value]{
background-color: green;
} */
[type]{
background-color: green;
}
三，模糊选择器
* 模糊选择器案例：
# [class^="icon_"] 这个表示以icon_开头的class
# [class*="icon_"] 这个表示包含icon_的class，即11、44和55div都变红
# [class*=" icon_"] 这个表示包含空格icon_的class，即只有11和55div变红
<style>
[class^="icon-"],
[class*="icon-"]{
width: 100px;
height: 50px;
background-color: red;
}
</style>
<div class="icon-test">11</div>//变红
<div>22222</div>
<div>33333</div>
<div class="azy-icon-next">44</div>//变红
<div class="text icon-hhh">55</div>//变红
四， 儿子序选择器：（面试，工作中用到的不多，看懂人家的代码）
p:first-child IE7兼容 以下IE9兼容 表示某一个元素的第一个儿子，且这个儿子是p元素
p:last-child 表示某一个元素的最后一个儿子，且这个儿子是p元素
p:nth-child(1)===p:first-child 下标从1开始
p:nth-child(3n+8) 表示 第8、11、14、17的儿子
p:nth-last-child(1)===p:last-child
p:nth-last-child(3n+8)
.haha:nth-of-type(2): 表示某一个元素的class为haha（限定儿子的范围）的儿子中排名第二的儿子
h2:nth-of-type(3)： 标签为h2的儿子中
h2:nth-of-type(1)===h2:first-of-type
//由上两个例子类比下两个例子
h2:nth-last-of-type(1)===h2:last-of-type
h2:nth-last-of-type(3)
想让父亲中第4个p元素之后所有人都选中
p:nth-child(4)~p （常用）
总结：jq支持css3所有选择器的用法，注意css3属性选择器转化为jq的写法，只需放到$("")内即可
案例：
.type-item:last-child
{
margin-bottom: 0px; //清楚最后一个元素li标签的margin-bottom
}
网友评论