【入门篇】基本CSS选择器 CSS选择器的概念与简单介绍

选择器的概念其实非常简单,类似于“地图”上各色的线条,不同的线条代表着不一样的意思。选择器是CSS的一个重要概念,所有的HTML语言中的标记样式都是由CSS的选择器进行控制的,通过选择器对不同的HTML标签赋予各种声明,即可实现不同的效果。
这就是网页结构与表现分离的一个重要概念。
最基本的选择器有三种:类别选择器标记选择器ID选择器
标记选择器,例如:
<style type=”text/css”>
body{font-size:12px;}
</style>
这段代码声明了body标签的属性。

类别选择器,例如:

<style type=”text/css”>
.text{font-size:12px;}
</style>

<body><div class=”text”>文字</div>
</body>

注意”.text”与”class=”text””对应。这就是类别选择器。

ID选择器,例如:

<style type=”text/css”>
#text{font-size:12px;}
</style>

<body><div id=”text”>文字</div>
</body>

注意”#text”与”id=”text””对应。这就是ID选择器。

当然,一个标签既可以采用ID选择器也可以采用类别选择器,也可以采用标签选择器,更进一步说,这三种选择器的任意组合也都是可以的(这就是混合选择器,将会在下一篇文字中细说!),这就有了冲突了,多个选择器一起使用,究竟该听谁的呢???这时候就要注意一下这些选择器的优先级了,以便给自己的设计找出最适合的使用规律或组合方式。
选择器的优先级如下:

行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

行内样式就是:<div style=”font-size:12px;”>文字</div>这样的。)