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. 数组中的字符串匹配（难度：简单）
1、CSS兄弟相邻选择器加号
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
CSS兄弟相邻选择器加号，举例说明
HTML代码
<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>CSS代码
.h2 + p{color: red
}
2、CSS兄弟选择器~(匹配选择器)
'~'匹配所有在指定元素之后的同级某个元素
举例说明一个，CSS的匹配选择器
HTML代码
<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>CSS代码
.h2 ~ p{color: red
}
3、总结：
CSS中的兄弟选择符号‘~’，可以选择指定元素后的，同级的相同的所有元素。比如上面的示例，所以h2标签后的P标签全部被选择，并加入了样式
通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
其他选择器可参考
兄弟组件怎么粘在一起css对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
可选择紧接在另一个元素后的元素，且二者有相同的父级元素 下面代码中，item2和item3会有效果，而item1不会有
HTML代码：
item1
item2
item3
CSS代码：li+li { font-size: 50px}
1、如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。
示例
#p1 + p {
margin-top: 50px
}
This is paragraph 1.
This is paragraph 2.
This is paragraph 3.
This is paragraph 4.
