我是第一个段落
我是第二个段落
CSS3选择器学习笔记
CSS3选择器
本文为本人CSS3学习笔记，文中所介绍内容以及源代码均出自：
图解css3核心技术与案例实战
W3CPlus
强烈推荐！！！
要使某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一过程任务的表现规则称为CSS选择器，它为获取目标元素之后施加样式提供了极大的灵活性。
CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择器和过滤选择器，可以帮助在开发中减少对HTML类名或者ID名的依赖，以及对HTML元素的结构依赖，使编写代码更加简单轻松。
一、基本选择器
基本选择器是CSS中使用最频繁、最基础的选择器，通过基本选择器可以确定HTML树形结构中大多数的DOM元素节点。
基本选择器
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
上面代码使用了基本选择器，页面的初步效果为
1.通配选择器
.demo *{
background: orange;
}
2.元素选择器
ul{
background: gray;
}
3.ID选择器
#first{
background: lime;
color: #000;
}
#last{
background: #000;
color: lime;
}
4.类选择器
.item{
background: green;
color: #fff;
font-weight: bold;
}
二、层次选择器
层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过七中某类关系可以方便快捷的选定需要的元素。
使用CSS3层次选择器
1
2
3
4
5
6
7
8
9
10
1.后代选择器
div div{
background: orange;
}
2.子选择器
body > div{
background: green;
}
3.相邻兄弟选择器
.active + div{
background: lime;
}
4.通用兄弟选择器
通用兄弟选择器是CSS3新增加的，用于选择某元素后面的所有兄弟元素。
.active ~ div{
background: red;
}
三、动态伪类选择器
动态伪类并不存在于HTML中，只有当用户与网站交互的时候才能体现出来。动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种为用户行为伪类。分别为：E:link,E:visited,E:active,E:hover,E:focus.
使用动态伪类选择器美化按钮
默认状态：
悬浮状态：
点击状态：
四、目标伪类选择器
目标伪类选择器” :target”用来匹配文档的URI中某个标识符的目标元素。具体来说。URI中的标识符通常会包含一个#号，后面带有一个标识符名称，例如”#contact”,”:target”就是用来匹配ID为”contact”的元素的。
使用纯CSS实现垂直手风琴效果。
垂直手风琴
五、结构伪类选择器
CSS3结构伪类选择器的使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
页面初始效果
1.:first-child的使用
ul > li:first-child{
background-color: green;
}
2.:last-child的使用
ul > li:last-child{
background-color: blue;
}
3.:nth-child的使用
ul > li:nth-child(3){
background-color: yellow;
}
ul > li:nth-child(n){
background-color: yellow;
}
ul > li:nth-child(2n){
background-color: yellow;
}
ul > li:nth-child(2n+1){
background-color: yellow;
}
ul > li:nth-child(n+5){
background-color: blue;
}
ul > li:nth-child(-n+5){
background-color: blue;
}
ul > li:nth-child(4n+1){
background-color: blue;
}
4.:nth-last-child的使用
:nth-last-child和:nth-child相似，只是:nth-last-child从某父元素的最后一个子元素开始计算来选择特定的元素。
ul > li:nth-last-child(4){
background-color: blue;
}
5.:nth-of-type的使用
:nth-of-type和:nth-child类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时使用:nth-of-type选择器来定位于父元素中某种类型的子元素是非常有用和方便的。
6.:nth-last-of-type的使用
:nth-last-of-type和:nth-of-type一样，用来选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始的。
7.:first-of-type和:last-of-type的使用
:first-of-type和:last-of-type这两个选择器类似于:first-child和:last-child,不同之处就是指定了元素的类型。换句话说，:first-of-type是用来定位一个父元素下的某个类型的第一个子元素。而:last-of-type用来定位一个父元素下的某个类型的最后一个子元素。
8.:only-child的使用
:only-child表示一个元素是它父元素的唯一子元素。换句话说，匹配元素的父元素中仅有一个子元素。
:only-child的使用
我就一个段落
页面初始效果：
.post > p:only-child{
border-width: 2px;
background-color: #000;
}
9.:only-of-type的使用
:only-of-type用来选择一个元素是它的父元素的唯一一个相同类型的子元素。换一种说法，:only-of-type表示一个元素有很多个子元素，而其中只有一个子元素是唯一的，使用:only-of-type就可以选中这个唯一类型的子元素。
10.:empty的使用
:empty用来选择任何内容的元素，这里“没有任何内容”指的是一点内容都么有，哪怕是一个空格。
六、伪元素
伪元素可用于定位文档中包含的文本，但无法在文档树中定位。CSS3中对伪元素进行了一定的调整，在以前的基础上增加一个冒号，相应的变成了::first-letter,::first-line,::before,::after,另外还增加了一个::selection。
1.::first-line和::first-letter的使用
CSS3伪元素
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
七、属性选择器
属性选择器的格式为以下几种：E[attr], E[attr=val], E[attr|=val], E[attr~=val], E[attr*=val], E[attr^=val], E[attr$=val].
CSS3属性选择器的使用
页面初始效果
1.E[attr]
a[id]{
background-color: yellow;
}
a[id][title]{
background-color: red;
}
2.E[attr=val]
a[id=first]{
background-color: red;
}
3.E[attr|=val]
a[lang|=zh]{
background-color: yellow;
}
4.E[attr~=val]
a[title~=website]{
background-color: yellow;
}
5.E[attr*=val]
a[class*=links]{
background-color: red;
}
6.E[attr^=val]
a[href^=http]{
background-color: yellow;
}
7.E[attr$=val]
a[href$=png]{
background-color:yellow;
}
