css3选择器如下：
一、通配符选择器（*）
通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。
二、元素选择器（E）
元素选择器，是css选择器中最常见而且最基本的选择器。
三、类选择器（.className）
类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名
四、id选择器（#ID）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）,
五、后代选择器（E F）
后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E
F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。
六、子元素选择器（E>F）
子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E >F，其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器（E + F）
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。
选择器共有六种类型：1.（元素）标签选择器
2.（类）class选择器
3.id选择器
4.后代选择器
5.子代选择器
6.交集选择器
例子：
器
1、标签选择器：给所有的同种标签制定标准
语法：标签名 {
key:value
}
实例：div {
width:100px
}
2、类名选择器:将标签归为一类来命名
一对多：一个类名可以多个标签使用
多对一：一个标签可以用多个类名
定义一个类名（class="类名"）
语法：.类名 {
key:value
}
实例：.head {
width:100px
}
使用类名（多个类名用空格隔开）
<div class="head"></div>
<div class="类名 类名-1 类名-2"></div>
3、ID选择器：唯一性 只能给一个标签用 同种ID名只能用一次
语法：#名字 {
key:value
}
实例：#foot {
width:100px
}
4、包含选择器：从父元素里面找符合标准的子孙元素
先找到父元素 再找到它的子孙元素 从中筛选出符合条件的元素
用 空格 连接
语法：.类名/标签名 .类名/标签名 {
key:value
}
实例：div .son {
width:100px
}
5、子选择器：找到的只是子元素
先找到父元素 再找到它的子元素 从中筛选出符合条件的元素
语法：.类名/标签名 >.类名/标签名 {
key:value
}
实例：.father>div {
width:100px
}
6、全局选择器： 通配符 * （兼容性不太好）
语法：* {
key:value
}
实例：* {
width:100px
}
7、群组选择器（节省代码）
语法：标签名,标签名 {
key:value
}
实例：div,div {
width:100px
}
8、相邻选择器 :
找到指定元素的相邻的兄弟元素（只能找下方的相邻元素）
语法：.类名/标签名+.类名/标签名 {
key:value
}
实例：.a+div {
width:100px
}
9、兄弟选择器 （css3）:
找到指定元素的同级的所有兄弟元素（只能找下方的同级所有兄弟元素，并且为同种标签）
语法：.类名/标签名~.类名/标签名 {
key:value
}
实例：.a~div {
width:100px
}
伪类选择器
1、:hover
指的是给指定元素加上鼠标悬停状态下的样式（该元素必须有宽高）
2、:active
指的是给指定元素加上鼠标激活状态下的样式
3、:after
指的是给指定元素后面添加一个伪元素 必须携带 content："" 属性
4、：before
指的是给指定元素前面添加一个伪元素 必须携带 content: "" 属性
5、 ： focus
设置焦点（聚焦）状态
6、
（1）：first-child
指的是父元素下的第一个子元素
（2）：last-child
指的是父元素下的最后一个子元素
（3）：nth-child（n）n为几 就是第几个子元素 从前面开始指定
2n
3n
odd 奇数
even 偶数
（4）：nth-last-child（n） 从后面开始指定
（5）：only-child只有一个子元素 需加空格
（6）：empty 没有子元素的 没有任何文本 不加空格
（7）：not（）取反（反选）
（8）：root 根元素
（9） E：first-of-type
先找到元素E，再找到其中的第一个
（10） E：last-of-type
先找到元素E，再找到其中的最后一个
（11） E：only-of-type
先找到元素E，再找到其中的只有一个的
（12） E：nth-of-type（n）
先找到元素E，再找到其中的第n个
（13） E：nth-last-of-type（n）
先找到元素E，再找到其中倒数的第n个
（14） ：first-letter/：last-letter （：：first-letter）
第一个字符/最后一个字符
（15） ：first-line /：last-line （：：first-line）
第一个行/最后一个行
属性选择器
1、 元素[属性] {}
找到某个元素，并且携带这个属性
<div class></div>
<div></div>
div[class='box'] {
width: 200px
height: 200px
background: green
}
// 只会给第一个设置属性
2、 元素[属性='属性值'] {}
找到某个元素，且携带这个属性，并且属性值相等的(有且只有一个属性值)
<div class></div>
<div class="box"></div>
<div class="box box2"></div>
div[class='box'] {
width: 200px
height: 200px
background: green
}
// 只会给第二个设置属性
3、 元素[属性~='属性值'] {}
找到某个元素，且携带属性，并且属性值中包含指定的属性值
<div class="box2"></div>
<div class="box box2"></div>
div[class~='box2'] {
width: 300px
height: 300px
background: purple
}
// 只要属性之中含有 box2就设置属性，给所有的div标签设置属性
4、 元素[属性|='前缀'] {}
找到元素，并且携带属性，并且属性值要以指定的形式: '前缀-xxxx'
<div class="key box1 box2"></div>
<div class="key-box box1 box2"></div>
<div class="key-box2 box1 box2"></div>
div[class|='key'] {
width: 50px
height: 50px
background: pink
}
// 只给后面两个设置属性
5、 元素[属性^='前缀'] {}
找到元素，并且携带属性 ,并且属性值以'前缀'开头（属性中只有一个属性值）
<div class="ax"></div>
<div class="baox"></div>
div[class^='a'] {
width: 20px
height: 20px
background-color: #000
}
// 只给第一个设置属性
6、元素[属性$='后缀'] {}
找到元素，并且携带属性 ,并且属性值以'后缀'结尾
<div class="baox"></div>
<div class="axb"></div>
div[class$='b'] {
width: 20px
height: 20px
background-color: blue
}
// 只给第二个设置属性
7、 元素[属性*='中间'] {}
找到元素，并且携带属性 ,并且属性值中包含'中间'
<div class="ax"></div>
<div class="axb"></div>
div[class*='x'] {
width: 10px
height: 10px
background-color: palegreen
}
// 两个都会设置属性
还有一点就是当我们写程序时，可能会遇到代码写上了，但是效果却不是我们想要的，这里就遇到了选择器权重的问题：
权重： 通配符<标签选择器<类名/伪类选择器<ID选择器<行内样式<！important
本人学识有限，如有错误，希望界内大牛可以指正，万分感谢！！！
image
©
著作权归作者所有,转载或内容合作请联系作者
点赞赚钻最高日赚数百
赞 (5)
敲键盘的那些年
小礼物走一走，来简书关注我
赞赏
下载简书，随时随地看好文
暂无评论
写评论
智慧如你，不想
发表一点想法
咩~
取消确认
推荐阅读
更多精彩内容
下载简书App
你也可以写文章赚赞赏
2016年5月Swift 2 学习 --- 117个注意事项与要点
Jenaral
App中阅读
233029h5常见的面试题
kismetajun
App中阅读
26362145面向对象的用电信息数据交换协议
庭说
App中阅读
9126613网络技术与应用
阿啊阿吖丁
App中阅读
264600css选择器的分类
败于化纤
App中阅读
8703css 伪类选择器
zhao_ran
App中阅读
67021408. 数组中的字符串匹配（难度：简单）
