选择器是CSS中很重要的概念,所有HTML语言中的标记样式都要通过不同的CSS选择器进行控制。用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果。
我们可简单地将CSS的选择器分为“基本”选择器与“复合”选择器两种:
一,“基本”选择器
这类选择器可以分为三种:标记选择器、类别选择器、ID选择器
1,标记选择器
一个HTML页面由很多不同的标记组成,CSS标记选择器用来声明哪些标记采用哪种CSS样式,因此,每一中HTML标记的名称都可以作为相应的标记选择器的名称。
例:我们用h1选择器来声明页面中所有的<h1>标记的CSS风格:
- <style>
- h1
- {
- color:red;
- font-size:25px;
- }
- </style>
2,类别选择器
上面提到要标记选择器一旦声明,那么页面中所有的该标记都 会相应地产生变化。例如,若当声明了<p>标记为红色时,页面中所有的<p>标记都会显示为红色。但如果希望其中某一个<p>标记不是红色,而是蓝色,仅依靠标记选择器是不够的,还需要引入类别(class)选择器。
类别选择器的名称可以由用户自定义,属性和值跟标记选择器一样,也必须符合CSS规范。
- .class{ clolr:green; font-size:20px;}
下面我们通过一个实例来说明类别选择器的用法与作用:
页面中同时出现了3个<p>标记,如果想让它们的颜色各不相同,就可以通过设置不同的class选择器来实现。
- <html>
- <head>
- <title>CSS类别选择器
- </title>
- <style type="text/css">
- .red{
- color:red;
- font-size:18px;
- }
- .green{
- color:green;
- font-size:20px;
- }
- </style>
- </head>
- <body>
- <p class="red">class类别选择器1</p>
- <p class="green">class类别选择器2</p>
- <h3 class="green">h3同样适用</h3>
- </body>
- </html>
其显示效果为:两个<p>标记分别呈现不两同的颜色和字体大小,而且任何一个class选择器都选用于所有的HTML标记,只需要用HTML标记的class属性声明即可,例如<h3>标记同样使用了.green这个类别。
在很多时候页面中几乎所有的<p>标记或<hn>标记都使用相同的样式风格,只有1~2个特殊的<p>或<hn>标记需要使用不同的风格来突出,这时我们可以先用标记选择器做全局的样式定义,再通过class选择器,对需要特殊显示的作类别标记即可。
另外,在HTML的标记中,还可以同时给一个标记运用多个class类别选择器,从而将两个类别的样式风格同时运用到一个标记中。
如下面的例子:
- <html>
- <head>
- <title>同时使用两个class
- </title>
- <style type="text/css">
- .one{
- color:blue;
- }
- .two{
- font-size:22px;
- }
- </style>
- </head>
- <body>
- <h4>一种都不使用</h4>
- <h4 class="one">同时使用两中class,只使用第一种</h4>
- <h4 class="one">同时使用两中class,只使用第二种</h4>
- <h4 class="one two">同时使用两中class,同时使用</h4>
- <h4>一种都不使用</h4>
- </body>
- </html>
3,ID选择器
ID选择器的使用方法与class选择器基本相同;不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。在HTML的标记中只需要利用ID属性,就可以直接用CSS中的ID选择器,其用法如下:
- #id { color:yellow; font-size:30px; }
下面用一个例子来说明ID选择器的用法:
- <html>
- <head>
- <title>
- </title>
- <style type="text/css">
- #one{
- font-weight:bold; /*粗休*/
- }
- #two{
- font-size:30px; /*字体大小*/
- color:#00900; /*颜色*/
- }
- </style>
- </head>
- <body>
- <p id="one">ID选择器1</p>
- <p id="two">ID选择器2</p>
- <p id="two">ID选择器3</p>
- <p id="one two">ID选择器3</p>
- </body>
- </html>
从显示效果中可以看出,第2行与第3行都显示了CSS方案,可以看出,很多的浏览器下,ID选择器可以用于多个标记。
但是每个标记定义的ID不只是CSS可以调用,JavaScript等其他脚本语言也可以调用,所以在使用时不要将ID选择器用于多个标记,否则会出现意想不到的错误,如果一个HTML中有两个相同的id标记,那么会导致JavaScrpt在查找id时出现错误。
而且我们两同时可以看到,最后一行没有任何CSS样式风格显示,这意味着ID选择器不支持像class选择器那样的多风格同时使用,类似”id=one two“这样的写法是完全错误的。