本节将要介绍CSS的选择器，CSS有三种常用的选择器，还有三种扩展选择器，说到选择器，那么选择器是做什么用的呢？
上一节我们介绍CSS常用属性的时候，我们都是通过在标签内定义Style属性来介绍的，但是如果Style中的属性有很多，并且我们还要把相同类型的标签用同一个CSS样式来美化，我们总不能Copy代码吧，首先页面太乱，再者代码量大，在大型的网站开发中会影响执行效率，最后自己操作起来也很麻烦，遇到这个问题，我们改怎么解决呢？
这就是选择器要做的事情，我们可以先定义好一个样式，然后再指定给那些需要美化的标签，这样难道不好吗？好，从美学角度讲，一个页面的同类事物只有一个风格会给用户整体舒服感，那么选择器该怎么用呢？下面先请看下图：
此图看和想5分钟，好好体会一下。了解了分类和用途之后，下面我们就结合代码，看看你的体会对吗？
1.标签选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
html
>
<
head
>
<
styletype
=
"text/css"
>
div{background:#FF0000}
</
style
>
</
head
>
<
body
>
<
div
>我是div</
div
>
<
div
>我也是div</
div
>
<
p
>我是p</
p
>
<
p
>我也是p</
p
>
<
inputtype
=
"text"
value
=
"我是TXT"
/>
</
body
>
</
html
>
|
在浏览器中查看发现所有的div标签全被美化了，其他标签都是默认状态，<style type="text/css"></style>这段代码可以先不用管，下一节会介绍，主要看红色标记的部分，标签选择要写在head标签内，写法格式要好好掌握。
2.类选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<styletype=
"text/css"
>
.waring{
background
:Blue;}
.highlight{
font-size
:
xx-large
;
cursor
:
help
;}
</style>
</head>
<body>
<div>
<h
1
>我是h
1
</h
1
>
<h
2
class=
"waring"
>我是h
2
</h
2
>
<h
3
class=
"highlight"
>我是h
3
</h
3
>
</div>
</body>
</html>
|
在浏览器中查看发现，只有在class属性被定义的标签被相应美化了，其他标签仍为默认样式，类选择器的名称是自定义的。
3.ID选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<styletype=
"text/css"
>
#myTxt
{
font-size
:
36px
;
background-color
:
#00ff00
;
}
</style>
</head>
<body>
<div>
<p>我是p</p>
<input id=
"myTxt"
type=
"text"
value=
"我是text"
/>
</div>
</body>
</html>
|
ID选择器和我们平时开发取对象很相似，最具有针对性。
对于以上的三种选择器，三种选择器可以结合使用，但是浏览器会给他们排个优先级，就是标签的样式被定义多次，该显示哪个样式，浏览器会其中优先级最高的样式，样式优先级：ID>class>标签。
4.关联选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<styletype=
"text/css"
>
div h
1
{
background
:
#00ff00
}
</style>
</head>
<body>
<div>
<p>我是p</p>
<h
1
>我是h
1
</h
1
>
</div>
<h
1
>我也是h
1
</h
1
>
</body>
</html>
|
在浏览器中查看，我们发现，只有div标签内的h1标签被修饰了，div标签内的其他标签，甚至div外的h1标签都没有被修饰，这就是关联组合器的作用，神奇吧。
5.组合选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<styletype=
"text/css"
>
div,h
1
,p{
background
:
#00ff00
}
</style>
</head>
<body>
<div>我是div</div>
<h
1
>我也是h
1
</h
1
>
<p>我是p</p>
<h
2
>我是h
2
</h
2
>
</body>
</html>
|
在浏览器中查看，我们会发现，只有div,h1,p这三种标签被修饰了，其他标签没有被修饰，这也是标签选择器的组合用法，达到页面效果统一。
6.伪元素选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<styletype=
"text/css"
>
a:active{
color
:Green};
a:hover{
cursor
:
help
};
a:link{
color
:Red};
a:visited{
color
:Blue};
</style>
</head>
<body>
<ahref=
"www.baidu.com"
>百度网首页</a>
</body>
</html>
|
这是我介绍的最后一个选择器了，上面代码在浏览器中查看，发现超链接默认的颜色变为了绿色，鼠标放上去的时候鼠标指针形状为问号帮助样式，当我们鼠标按下时超链接的颜色变为红色，访问完再回到页面，发现超链接的颜色变为蓝色，我说完这些你也大概知道上面的代码是什么意思了，为选择器不仅可以用于a标签，还可以用于p等标签，具体怎么用就去查帮助文档吧，怎么查呢？
DHTML->HTML元素->a标签->样式。
好了，关于选择器我就介绍到这里，之所以举这么简单的例子，是因为我主要讲的是原理，不想因为初学者突然看到其他难点而忽略了重点。好了，本节就到这里，下一节将继续HTML与CSS的结合方式。
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
