基础选择器

• 通配符选择器

  • 通配符,作用于文档中所有的元素,为文档设置默认样式.

* {
  color:red;
}

• 元素/标签选择器

p {
 color:red;
}

• ID选择器
  • 以#开头加自定义id名,id名以字母开头.

 #box{
  color:red;
}

• 类选择器
  • 以.开头加自定义类名.

.content {
  color:red;
}

• 属性选择器
  • 属性名放在中括号内

[name=lht] {
  color:red;
}

后代选择器

.content #box p {
  font-size: 20px;
}

子元素选择器

• 匹配某元素的直接后代元素

#odiv>p {
  color: red;
}

相邻兄弟元素

• 选择紧接在另一元素后的元素,且二者有相同父元素
  • 用+号表示相邻兄弟关系

h3+p {
  color: green;
}

交集选择器

• 类选择器,ID选择器可以结合元素选择器来使用，形成交集选择器

h3.content {
  color: red;
}
h3#h3 {
  background-color: yellow;
}

组合选择器

#h3,h1,p,span {
  color: #cceeaa;
}

动态伪类选择器

a:link {
  color:green;
}
a:visited {
  color:yellow;
}
a:active {
  color:pink;
}
a:hover {
  color:red;
}

伪元素选择器

• before在某个标签内容的最前方添加内容
• after在某个标签内容的末尾添加内容
• first-line对首行文字设置样式
• first-letter对首字母设置样式

p:before {
  content: "HELLO";
}
p:after {
  content: "see you";
}
p:first-line {
  color: red;
  font-size: 20px;
}
p:first-letter {
  font-size: 32px;
  color: black;
}

CSS3新增选择器

child系列选择器

• first-child选中作为父元素的第一个子元素的元素
• last-child选中作为父元素的最后一个子元素

p:first-child {
  color:#f00;
}
p:last-child {
  color:#f00;
}

• nth-child(n)正序 选中父元素的第n个子元素;nth-child(odd)选中奇数,nth-child(even)选中偶数;nth-child(2n+3)n的取值从0开始
• nth-last-child(n)倒序
• only-child选中父元素只包含一个子元素的标签

li:nth-child(7) {
  color:#f00;
}
li:nth-last-child(3n+1) {
  color:#f00;
}  
li:only-child {
  color:#f00;
}

of-type系列选择器

• first-of-type选择父元素内指定元素类型的第一个
• last-of-type选择父元素内指定元素类型的最后一个
• nth-of-type(n)选择指定序号的标签(用法和nth-child相同)
• nth-last-of-type(n)选择指定序号的标签(倒序)(用法和nth-last-child相同)
• only-of-type选择父元素只包含一个同类型的子元素

span:first-of-type {
  color:#f00;
}
p:last-of-type {
  color:#f00;
}
dt:nth-of-type(2) {
  color:#f00;
} 
dt:nth-last-of-type(3n+1) {
  color:#f00;
}
dt:only-of-type {
  color:#f00;
}

兄弟选择器

• E~F,E和F是同级元素,且F在E之后,将选中E元素后面的所有F元素(下面例子中将选中除第一个span外所有的span标签)

span~span {
  color:#f00;
}

伪对象选择器

• CSS3中对之前的伪元素进行了调整,多加了一个:,此外伪元素还增加了::selection(选中状态下的样式)

p::first-line {
  color:red;
}
p::first-letter {
  color:green;font-size:25px;
}
a::before {
  content:url("qvod.jpg");
}
a::after {
  content:url("qvod.jpg");
}
span::selection {
  background:#F0F;
}

UI状态伪类选择器

• 针对表单

input:disabled {
  background:yellow;color:green; /*被禁止状态下状态下的颜色*/
}
input:enabled {
  background:#f90;color:red;
}
input:checked+span {
  background:red; /*选中状态下的颜色*/
}

属性选择器

• ~表示前面有空格
• |="a",表示属性值是以a或a-开头的
• href^="http://"表示以http://开头
• href$="rar"表示以rar结尾
• href*="o"表示其中含有o

p[id] {
background:red;
}
p[id="green"] {
background:green;
}
p[class~="yellow"] {
background:yellow;
}
p[class|="a"] {
background:blue;
}
a[href^="http://"] {
  color:red;text-decoration:none;
}
a[href$="rar"] {
  color:pink;text-decoration:none;
}
a[href$="rar"]:after {
  content:url(images/rar.jpg);
}
a[href*="o"] {
  background:green;
}