JavaScript 即学即用,轻松搞定这些选择器!(上)

doudou · 2018年12月12日 · 38 次阅读

所谓基本选择器是指选择器的名称前面没有其他选择器,即在组成上,基本选择器是单一名称。

基本选择器主要包括:

  • 元素选择器
  • ID 选择器
  • 类选择器
  • 伪类选择器
  • 伪元素选择器
  • 通用选择器

元素选择器

在 W3C 标准中,元素选择器又称为类型选择器。使用元素选择器设置样式的语法如下:

元素选择器 { 
属性 1: 属性值 1;
属性 2: 属性值 2;
 ... 
}

语法说明:元素选择器重新定义了 HTML 标签的显示效果,网页中的任何一个 HTML 标签都可以作为相应的元素选择器的名称,设置的样式对整个网页的该类元素有效。

例如,div 元素选择器就是声明当前页面中所有的 div 元素的显示效果。元素选择器样式应用是通过匹配 HTML 文档元素来实现的。

【示例 2-2】元素选择器使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 元素选择器的使用 </title>
<style>
div { /* 使用 div 标签作为元素选择器 */
     font-size:32px; /* 设置字体大小样式 */
     color:red; /* 设置字体颜色样式 */
}
</style>
</head>
<body>
 <div> 妙味公告 </div>
 <div> 妙味课堂 </div>
 <div>miaov 公告 </div>
 <div>miaov 课堂 </div>
</body>
</html>

上述 CSS 代码使用 div 作为元素选择器,这样就选中了页面上所有的 div 元素,因而在大括号内设置的任何样式,对页面中所有 div 元素都有效。运行结果如图 2-4 所示。

ID 选择器

从上一节的介绍中,我们知道,元素选择器可以选择某一类元素。很显然,如果需要某一类元素中某个元素设置特定的样式,比如,对示例 2-2 中第一个div元素设置不同样式,此时使用元素选择器将无满足需要,针对这种情况,我们可以使用 ID 选择器。

ID 选择器的名称为元素的 id 属性值,它可以针对一个元素进行样式设置,需注意的是 ID 名称在一个 HTML 页面中必须唯一,你可以理解为 ID 就像是一个人的身份证号一样,不可重复。所以一个 ID 选择器只允许设置一个元素的样式。在设置前必须加上标识符“#”。

使用 ID 选择器设置样式的语法如下:

#ID 选择器 {
属性 1: 属性值 1;
属性 2: 属性值 2;
 ... 
}

语法说明:ID 选择器名称的第一个字符不能使用数字;ID 选择器名不允许有空格,选择器名前的“#”是 ID 选择器的标识,不能省略;另外,ID 选择器名区分大小写,应用时应正确书写。

【示例 2-3】ID 选择器使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ID 选择器的使用 </title>
<style>
#teacher{ /* 使用 ID 选择器 */
 color:green; /* 设置文本颜色样式 */
 font-weight:bold; /* 设置文本加粗样式 */
}
</style>
<body>
 <div> 妙味课堂 </div>
 <div> 妙味课程 </div>
 <div id="teacher"> 妙味讲师 </div>
</body>
</html>

上述代码中有 3 个 div 元素,其中第 3 个 div 设置了 id 属性,值为“teacher”。CSS 代码通过匹配 id 属性值,可知 ID 选择器选中了第 3 个 div 元素,因而其设置的绿色文本颜色以及加粗样式,只对第 3 个 div 元素有效,其他两个 div 元素的样式则保持默认效果。

示例 2-3 的运行结果如图 2-5 所示。

还有一些情况也很常见,例如我们希望有一列 div 具备公共样式,比如统一的背景、统一的大小等,但我们希望其中一个元素样式略有不同,希望针对这个元素设置特殊样式,此时我们可以结合元素选择器和 ID 选择器来共同设置样式:元素选择器设置公共样式,ID 选择器设置特殊样式。具体示例如下。

【示例 2-4】结合元素选择器和 ID 选择器共同设置元素样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 结合元素选择器和 ID 选择器共同设置元素样式 </title>
<style>
/* 使用元素选择器设置元素的下边距、字体加粗、字号大小以及背景颜色公共样式 */
div{
    margin-bottom:6px; /* 设置下边距 */
    background:#CFF; /* 设置背ఀ颜色 */
    font-weight:bold; /* 设置文本加粗 */
    font-size:26px; /* 设置字号大小 */
}
/* 使用 ID 选择器设置元素的文本颜色特殊样式 */
#teacher{ 
 color:green; /* 设置文本颜色 */
}
</style>
</head>
<body>
<div> 妙味课堂 </div>
<div>miaov 课程 </div>
<div id="teacher"> 妙味讲师 </div>
</body>
</html>

上述代码中的 3 个 div 元素内容都需要加粗并以 26px 字号显示,同时,都包含背景颜色,但第 3 个 div 元素内容的文本颜色要求为绿色。可见,三个 div 存在公共样式,同时,第三个 div 存在特殊样式。对 div 的公共样式可使用 div 元素选择器进行设置,而第 3个 div 的特殊样式则使用 ID 选择器进行设置,示例 2-4 在浏览器中的最终运行结果如图 2-6 所示。

由于 ID 名不可重复,所以 ID 选择器只能选择单个元素。ID 选择器的这个特性在某些情况下,会给我们带来不便。比如我们使用 ID 选择器对示例 2-2 中的 4 个 div 元素设置样式,要求是其中第 1 个和第 3 个 div 的文本颜色为红色,第 2 个和第 4 个 div 的文本颜色为蓝色。使用 ID 选择器就需要对各个 div 都设置好 id 属性,将示例 2-2 的代码修改如下。

【示例 2-5】页面存在多个元素具有相同样式时使用 ID 选择器的问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 页面存在多个元素具有相同样式时使用 ID 选择器的问题 </title>
<style>
#notice1{
    color:red;
}
#course1{
    color: blue;
}
#notice2{
    color:red;
}
#course2{
    color:blue;
}
</style>
</head>
<body>
     <div id="notice1"> 妙味公告 </div>
     <div id="course1"> 妙味课堂 </div>
     <div id="notice2">miaov 公告 </div>
     <div id="course2">miaov 课堂 </div>
</body>
</html>

示例 2-5 的 CSS 代码中,虽然第 1 个和第 3 个 div、第 2 个和第 4 个 div 的样式完全相同,但由于使用 ID 选择器,相同样式也要使用不同 ID 选择器去定义(因为 ID 名必须唯一)。可见,针对多个元素具有相同样式的情况,使用 ID 选择器是不可取的。此时是否可以使用元素选择器呢?很显然,这种情况下,元素选择器更不可取,因为元素选择器会让所有同类元素使用同一种样式。

有关类选择器的介绍请参见下一小节。示例 2-5 的运行结果如图 2-7 所示。

类选择器

在上一小节最后,我们说示例 2-5 中的样式设置使用类选择器最合适。那么什么是类选择器呢?其实,类选择器也是一种基本选择器,它和 ID 选择器一样,可以允许以一种独立于文档元素的方式来指定样式。与 ID 选择器不同的是,类选择器的名称为元素的 class 属性值,一个类名在 HTML 页面中可以重复出现多次,此外,类选择器名前面必须加上“.”作为标识符。

使用类选择器设置样式的语法如下:

. 类选择器 { 
属性 1: 属性值 1;
属性 2: 属性值 2;
  ... 

语法说明:类选择器名称的第一个字符不能使用数字;类选择器名前的“.”是类选择器的标识,不能省略;另外,类选择器的命名是区分大小的,应用时应正确书写。

下面使用类选择器设置示例 2-5 的 div 样式。大家可以看到,第 1 个和第 2 个 div 的 class 属性值一样, 第 3 个和第 4 个 div 的 class 属性值一样。

具体代码如下。

【示例 2-6】使用类选择器设置示例 2-5 的 div 样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 类选择器的使用 </title>
<style>
.red{
      color:red;
}
.blue{
      color:blue;
}
</style>
</head>
<body>
      <div class="red"> 妙味公告 </div>
      <div class="red"> 妙味课堂 </div>
      <div class="blue">miaov 公告 </div>
      <div class="blue">miaov 课堂 </div>
</body>
</html>

上述代码的运行结果和图 2-7 完全相同。

在 2.3.2 小节中,我们知道,ID 选择器可以在一组同类元素中选取某个元素,其实类选择器同样具有这个能力,但不同的是,类选择器可一次性选取若干个元素。 例如:有三组 div 元素,它们的字体大小均为 26px,并且是加粗显示,但其中前两个 div 的字体是绿色,且字体是斜体,在这样的需求下,可以结合元素选择器和类选择器来共同完成样式设置,具体示例如下。

【示例 2-7】结合元素选择器和类选择器共同设置元素样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 结合元素选择器和类选择器共同设置元素样式 </title>
<style>
/* 使用元素选择器设置元素的字体加粗以及字号大小公共样式 */
div{ 
    font-weight:bold; 
    font-size:26px;
} 
/* 使用类选择器设置元素的字体格式和文本颜色特殊样式 */
.miaov{
    color:green;
    font-style:italic;
}
</style>
</head>
<body>
<divclass="miaov"> 妙味课程 </div>
<divclass="miaov"> 妙味课堂 </div>
<div> 学员作品 </div>
</body>
</html>

上述代码在浏览器的运行结果如图 2-8 所示。

示例 2-5 和示例 2-7 虽然体现了元素选择器和 ID 选择器、类选择器的组合应用场景,但在真实的项目开发中,我们通常不会给 div 做这样的全局样式设置,因为这样会干扰到页面其他 div 元素。真实的项目开发中,更常见的做法是在一个 class 属性中使用多个类名来区分样式。

先来看看多个 class 属性值的设置。class 属性值中除了包含一个类,还可以包含多个类,即一个词列表(类名列表),各个词之间使用空格分隔。比如:

,这里面的 “miaov green” 就是不同的类名,在一个 class 属性内,不仅可以设置两个,还可以设置多个,根据实际开发需要而定。因此,图 2-8 的代码实现,可以改写成如下示例。

【示例 2-8】设置多个类名来共同设置元素样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用多个类名共同设置元素样式 </title>
<style>
/* 使用元素选择器设置 miaov 类的字体加粗以及字号大小公共样式 */
.miaov { 
    font-weight:bold; 
    font-size:26px;
} 
/* 使用 green 类选择器设置元素的字体格式和文本颜色特殊样式 */
.green {
    color:green;
    font-style:italic;
}
</style>
</head>
<body>
    <divclass="miaov green"> 妙味课程 </div>
    <div class="miaov green"> 妙味课堂 </div>
    <div class="miaov"> 学员作品 </div>
</body>
</html>

上述代码在浏览器中的运行结果和图 2-8 所示一致,但由于使用到多个类名,页面中再添加其他 div 元素,也不会受到干扰了。

此外,还有一种工作中不常见的选择器——多类选择器,为保证知识点的完整,在本书中对其做简单介绍,它的设置方式依然是 class="miaov green hot",但在定义 CSS 选择器时,需要以 .miaov.green.hot 作为选择器名称,这种选择器称之为多类选择器。

使用多类选择器设置样式的语法如下:

. 类选择器 1 . 类选择器 2 . 类选择器 3...{ 
属性 1: 属性值 1;
属性 2: 属性值 2;
  ... 

语法说明:. 类选择器 1. 类选择器 2. 类选择器 3……各个类选择器之间不能有空格。多类选择器只能选择包含这些类名的元素(类名的顺序不限)。如果多类选择器包含了类名列表中没有的类名,匹配就会失败。

【示例 2-9】使用多类选择器来进行元素样式设置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用多类选择器来进行元素样式设置 </title>
<style>
/* 使用多类选择器进行样式设置 */
.miaov.green.hot { 
     font-weight:bold; 
     font-size:26px;
}
</style>
</head>
<body>
<div class="miaov green hot"> 妙味课程 </div>
</body>
</html>

以上代码在浏览器中的运行结果如图 2-9 所示。

当设置多类选择器时,必须正确写成 .miaov.green.hot 才能实现,写成 .miaov.green 也可以正确设置。但如果写成:.miaov.green.abc,即使样式表中存在 .abc 这个类,也会导致样式设置无效。

本文就到这里啦,下节我们继续介绍伪类选择器、伪元素选择器、通用选择器,大家可以关注起来。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册