基础选择器
-
通配符选择器
- 通配符,作用于文档中所有的元素,为文档设置默认样式.
* {
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;
}
