zoukankan      html  css  js  c++  java
  • 即学即用,轻松搞定这些选择器!(上)

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

    基本选择器主要包括:

    • 元素选择器

    • 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 属性值中除了包含一个类,还可以包含多个类,即一个词列表(类名列表),各个词之间使用空格分隔。比如:<div class="miaov green"></div>,这里面的 “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 这个类,也会导致样式设置无效。

     

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

  • 相关阅读:
    C#操作REDIS例子
    A C# Framework for Interprocess Synchronization and Communication
    UTF8 GBK UTF8 GB2312 之间的区别和关系
    开源项目选型问题
    Mysql命令大全——入门经典
    RAM, SDRAM ,ROM, NAND FLASH, NOR FLASH 详解(引用)
    zabbix邮件报警通过脚本来发送邮件
    centos启动提示unexpected inconsistency RUN fsck MANUALLY
    rm 或者ls 报Argument list too long
    初遇Citymaker (六)
  • 原文地址:https://www.cnblogs.com/Highdoudou/p/10107328.html
Copyright © 2011-2022 走看看