CSS从入门到精通——基础选择器(二)

最新推荐文章于 2023-12-07 16:22:58 发布

Jungle和

最新推荐文章于 2023-12-07 16:22:58 发布

阅读量457

点赞数

分类专栏：前端开发文章标签： css类选择器

本文链接：https://blog.csdn.net/qq_42212132/article/details/97942162

版权

前端开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

类选择器

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

例如，对于HTML页面:

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

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

之后，添加页面样式:

<style type="text/css">
  .main {
    background-color: ivory;
    margin: 10px;
  }
  .news {
    padding: 10px;
    color: black;
    font-weight: bold;
  }
  p {
    color: grey;
  }
  </style>

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

最后，样式应用的效果如图：

类选择器语法

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

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

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

2.然后，书写相应类的样式。

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

Jungle和

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS从入门到精通——基础选择器(二)

类选择器类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。例如，对于HTML页面:<body><div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约...
复制链接

扫一扫