CSS 类选择器

雨点打透心脏的1/2处 2022-11-13 00:46 150阅读 0赞

### CSS 类选择器 ###

*  任务描述
 *  相关知识

# 任务描述 #

本关任务是通过类选择器的方式，更改独立于文档元素的属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 相关知识 #

**`类选择器`**

*  类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。

例如，对于HTML页面:

<body>
    <div class="main">
      <article class="news">
        <h1>地震自救指南</h1>
        <p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先，在重心较低、且结实牢固的桌子下面躲避，并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合，无论如何，也要用坐垫等物保护好头部。</p>
      </article>
    </div>
    </body>

在该页面中，我们将第一个`div`元素的`class`设置为`main`，`article`元素的`class`值设置为`news`。通常设置`class`名字时，不要设置已有元素名，例如`p`、`articel`。

之后，添加页面样式:

与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（`.`），然后书写相应的样式声明。

最后，样式应用的效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
**`类选择器语法`**

所以，我们可以看出，类选择器的语法规则如下：

*  首先，将html中想要应用类样式的元素，指定类名；

<元素名 class="指定的类名"></元素名>
    <元素名 class="指定的类名">

*  然后，书写相应类的样式；

.指定的类名 {样式声明}

**编程要求**

*  使用类选择器修改页面样式，具体要求入下：
 *  给第43行的`div`元素添加名字为`newsSection`的类；
 *  在第27行添加`newsSection`类的样式：外边距为20（`margin-top: 20px;`）内边距为20（`padding:20px;`）和背景颜色白色（`background-color: white;`）。

**`代码文件：`**

<!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>类选择器</title>
      <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } /* ********** BEGIN ********** */ .newsSection{ margin-top:20px; padding:20px; background-color:white; } /* ********** END ********** */ </style>
    </head>
    <body>
    <div class="main">
      <header>
        <li><a href="#chosen">精选</a></li>
        <li><a href="#news">时事</a></li>
        <li><a href="#finance">财政</a></li>
        <li><a href="#think">思想</a></li>
        <li><a href="#life">生活</a></li>
      </header>
      
      <div class="newsSection">
            
        <section>
          <h2>精选</h2>
          <li>精选新闻1</li>
          <li>精选新闻2</li>
          <li>精选新闻3</li>
        </section>
        <section>
          <h2>时事</h2>
          <li>时事新闻1</li>
          <li>时事新闻2</li>
          <li>时事新闻3</li>
        </section>
        <section>
          <h2>财政</h2>
          <li>财政新闻1</li>
          <li>财政新闻2</li>
          <li>财政新闻3</li>
        </section>
        <section>
          <h2>思想</h2>
          <li>思想新闻1</li>
          <li>思想新闻2</li>
          <li>思想新闻3</li>
        </section>
        <section>
          <h2>生活</h2>
          <li>生活新闻1</li>
          <li>生活新闻2</li>
          <li>生活新闻3</li>
        </section>
      </div>
      
      <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
    </div>
    
    </body>
    </html>

> 读书是在别人思想的帮助下，建立起自己的思想。——————鲁巴金

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/9ca55308fa7b4d59b15b5820356a684b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/b2b7bbf4a98540678c1376afdefa9565.png