首页 > 代码库 > 1.3 基本CSS选择器

1.3 基本CSS选择器

2024-07-08 20:29:03   227人阅读

一、标记选择器

二、类别选择器

三、ID选择器

选择器(selector)是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。

为了理解选择器的概念，可以用“地图”作为类比。在地图上都可以看到一些“图例”，比如河流用蓝色的线表示，某公路用红色的线表示，省会城市用黑色圆点表示，等等。本质上，这就是一种“内容”与“表现形式”对应关系。在网页上，也同样存在着这样的对应关系，例如h1标题用蓝色文字表示，h2标题用红色文字表示。因此为了使CSS规则与HTML元素对应起来．就必须定义一套完整的规则，实现CSS对HTML的“选择”。这就是叫做“选择器”的原因。

在CSS中，有几种不同类型的选择，本节先来介绍“基本”选择器。所谓“基本”，是相对于下一节中要介绍的“复合”选择器而言的。也就是说”复合”选择器是通过对基本选择器进行组合而构成的的。

基本选择器有标记选择器，类别选择器和ID选择器3种，下面详细介绍。

一、标记选择器

一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如，p选择器就是用于声明页面中所有<p>标记的样式风格。同样可以通过h1选择器来声明页面中所有的<h1>标记的CSS风格，如下所示：

  1. <style> 
  2. h1{ 
  3.     color:#FF0000; 
  4.     font-size:24px; 
  5. } 
  6. /*
  7. 选择器{
  8. 属性:值;
  9. ……
  10. }
  11. */
  12. </style> 

以上这段CSS代码声明了HTML页而巾所有的<h1>标记。文字的颜色都采用红色，大小都为24px。每-个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如上示例所示。

如果希望所有<h1>标记不再采用红色，而是蓝色，这时仅仅需要将属性color的值修改为blue即可全部生效。

注意：CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中不存在，或者某个属性的值不符合该属性的要求，都不能使CSS语句失效。下面是一些典型的错误语句：

  1. Head-height:48px /*非法属性*/ 
  2. color:ultraviolet /*非法值*/ 

对于上面提到的这些错误，通常情况下可以直接利用CSS编辑器(如Dreamweaver或Expression Web）的语法提示功能避免，但某些时候还需要查阅CSS手册，或者直接登录W3C的官方网站（http://www.w3.org/）来查阅CSS的详细规格说明。lodidance.com

返回顶部

二、类别选择器

在上一小节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明了<p>标记为红色时，页面中所有的<p>标记都将显示为红色。但是如果希望其中的某一个<p>标记不是红色，而是蓝色，仅依靠标记选择器是不够的，还需要引入类别( class)选择器。

例如，当页面中同时出现3个<p>标记时，如果想让它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示，实例文件位于网页学习网CSS教程资源的“第1章\示例5.htm”。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>网页学习网示例5-class选择器</title> 
  7. <style type="text/css"> 
  8. .red{ 
  9.     color:red; /*红色*/ 
  10.     font-size:18px;  /*文字大小*/ 
  11. } 
  12. .green{ 
  13.     color:green; 
  14.     font-size:20px; 
  15. } 
  16. /* 
  17. .class 类别选择器{ 
  18.     属性:值; 
  19.     …… 
  20. } 
  21. */ 
  22. </style> 
  23. </head> 
  24. <body> 
  25. <p class="red">class选择器1</p> 
  26. <p class="green">class选择器2</p> 
  27. <p class="green">h1同样适用</p> 
  28. </body> 
  29. </html> 

其显示效果如图1所示。从图中可以看到两个<p>标记分别呈现出了不同的颜色和字体大小，而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如<h1>标记同样使用了.green这个类别。

 

图1 类别选择器示例
图1 类别选择器示例
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>网页学习网示例6-class选择器与标记选择器</title> 
  7. <style type="text/css"> 
  8. p{ /*标记选择器*/ 
  9.     color:blue;  
  10.     font-size:18px;   
  11. } 
  12. .special{ 
  13.     color:red; 
  14.     font-size:20px; 
  15. } 
  16. </style> 
  17. </head> 
  18. <body> 
  19. <p>class选择器与标记选择器1</p> 
  20. <p class="special">class选择器与标记选择器2</p> 
  21. <p>class选择器与标记选择器3</p> 
  22. </body> 
  23. </html> 

首先通过标记选择器定义<p>标记的全局显示方案，然后再通过一个class选择器对需要突出的<p>标记进行单独设置，这样大大提高了代码的编写效率，其显示效果如图2所示。

图2 两种选择器配合
图2 两种选择器配合

在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度，如下例所示，示例文件位于网页学习网CSS教程中“第1章\07,htm”。lodidance.com

  1. <html> 
  2. <head> 
  3. <title>网页学习网-同时使用两个class</title> 
  4. <style type="text/css"> 
  5. .one{ 
  6.     color:blue;     /* 颜色 */ 
  7. } 
  8. .two{ 
  9.     font-size:22px; /* 字体大小 */ 
  10. } 
  11. </style> 
  12. </head> 
  13. <body> 
  14.     <h4>一种都不使用</h4> 
  15.     <h4 class="one">同时使用两种class，只使用第一种</h4> 
  16.     <h4 class="two">同时使用两种class，只使用第二种</h4> 
  17.     <h4 class="one two">同时使用两种class，同时使用</h4> 
  18.     <h4>一种都不使用</h4> 
  19. </body> 
  20. </html> 

显示效果如图3所示，可以看到使用第1种class的第2行显示为蓝色，而第3行则仍为黑色，但由于使用了.two，因此字体变大。第4行通过“class="ne two"”将两个样式同时加入，得到蓝色大字体。第1行和第5行没有使用任何样式，仅作为对比时的参考。

图3 同时使用两种CSS风格
图3 同时使用两种CSS风格

返回顶部

三、ID选择器

ID选择器的使用方法与class选择器基本相同；不同之处在于ID选择器只能HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。

下面举一个实际案例，示例文件位于网页学习网CSS教程资源中”第1章\08.htm”。

  1. <html> 
  2. <head> 
  3. <title>网页学习网-ID选择器</title> 
  4. <style type="text/css"> 
  5. #one{ 
  6.     font-weight:bold;       /* 粗体 */ 
  7.     } 
  8. #two{ 
  9.     font-size:30px;         /* 字体大小 */ 
  10.     color:#009900;          /* 颜色 */ 
  11.     } 
  12. </style> 
  13. </head> 
  14. <body> 
  15.     <p id="one">ID选择器1</p> 
  16.     <p id="two">ID选择器2</p> 
  17.     <p id="two">ID选择器3</p> 
  18.     <p id="one two">ID选择器3</p> 
  19. </body> 
  20. </html> 

显示效果如图4所示，第2行与第3行都显示了CSS的方案。可以看出，在很多浏览器下，ID选择器可以用于多个标记，即每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。因为这个特性，所以不要将ID选择器用于多个标记．否则会出现意想不到的错误。如果一个HTML中有两个相同id的标记，那么将会导致JavaScript在查找id时出错，例如函数getElementByld()。

图4 ID选择器示例
图4 ID选择器示例

正因为JavaScript等脚本语言也能凋用HTML中设置的id．所以ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多其能赋予一个HTML标记。

另外从图4中还可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使朋，类似“id="one

返回顶部

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/657.html


联系
我们