一、元素选择器
1.最常见的选择器就是元素选择器，文档的元素就是最基本的选择器
例如：h1{} a{} ……
|
1
2
3
4
|
<
p
>HelloWorld</
p
>
p{
color: blue;
}
|
二、选择器分组
1.例子：
h1、h2{}
|
1
2
3
|
h1,h2{
color: red;
}
|
2.通配符：
*{}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>选择器</
title
>
<
link
href
=
"style.css"
rel
=
"stylesheet"
type
=
"text/css"
>
</
head
>
<
body
>
<
h1
>标题1</
h1
>
<
h2
>标题2</
h2
>
<
p
>HelloWorld</
p
>
</
body
>
</
html
>
|
|
1
2
3
4
5
6
|
*{
color: red;
}
h1,h2{
font-size: 45px;
}
|
通常会使用通配符来取消内外边距
|
1
2
3
4
|
*{
margin: 0px;
padding: 0px;
}
|
三、类选择器
1.类选择器允许以一种独立于文档元素的方式来指定样式
例如：.class{}
|
1
2
3
|
.div{
color: red;
}
|
2.结合元素选择器
例如：a.class{}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
a.div{
color: red;
}
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>选择器</
title
>
<
link
href
=
"style.css"
rel
=
"stylesheet"
type
=
"text/css"
>
</
head
>
<
body
>
<
div
class
=
"div"
>
HelloWorld
</
div
>
<
a
class
=
"div"
>HelloWorld</
a
>
</
body
>
</
html
>
|
3.多类选择器
例如：.class.class{}
|
1
2
3
4
5
6
7
8
9
|
.p1{
color: blue;
}
.p2{
font-size: 30px;
}
.p1.p2{
font-style: italic;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>选择器</
title
>
<
link
href
=
"style.css"
rel
=
"stylesheet"
type
=
"text/css"
>
</
head
>
<
body
>
<
p
class
=
"p1"
>This is my web page</
p
>
<
p
class
=
"p2"
>This is my web page</
p
>
<
p
class
=
"p1 p2"
>This is my web page</
p
>
</
body
>
</
html
>
|
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1772864
