初识CSS-类选择器

待我称王封你为后i 2022-05-15 14:39 375阅读 0赞

物以类聚人以群分,网页中的元素也是一样的

在页面中总有很多元素拥有一模一样的外观,比如:一样的大小,同样的颜色

那么我们如果继续使用id选择器一个一个去设置样式就会很麻烦

这个时候我们可以选择类选择器来写样式

  1. <style>
  2. .red{
  3. color: red;
  4. }
  5. </style>
  6. <body>
  7. <h1 class="red">abc</h1>
  8. <h1 class="red">sdf</h1>
  9. </body>

如果想给两个h1标签同样适用于一种样式的话,我们用类选择,给两个h1标签添加class=“red”

这样,两个h1标签中的文本就都会变成红色

类选择器的好处就是只用写一遍样式,哪个元素如果想使用这种样式,只用添加class属性即可,不需要重复写一种样式,极大的增加了编写效率。

发表评论

表情:
评论列表 (有 0 条评论,375人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS-后代选择

    网页中的元素,具有明显的层级关系 可以利用他们的相对位置和隶属关系,来定位元素,以简化选择符的设计 第一个选择符是起始点,用空格与后面的选择符分隔开,可以找到所有

    相关 CSS-群组选择

    群组选择符,从字面意义上看,就是一次性的选择多个元素,统一进行样式设置 每个选择符之间,用逗号隔开,然后把公共样式写到声明块中即可 选择符1,选择符2,选择符3{

    相关 CSS-属性选择

    标签中的属性,可以用来详细的描述元素,当然也可以用来选择元素。 CSS的属性选择符中,属性名是放在一对方括号\[\]中的 如果要使用多个属性,可以连续写多个,例如

    相关 CSS-选择

    物以类聚人以群分,网页中的元素也是一样的 在页面中总有很多元素拥有一模一样的外观,比如:一样的大小,同样的颜色 那么我们如果继续使用id选择器一个一个去设置样式就会很麻烦

    相关 CSS-标签选择

    用标签来选择网页元素,可能是最直观的方式了。 它的基本格式是:标签名 空格,后面是用一对花括号\{\}包起来的声明块 然后将要设置的样式声明以\[属性名,冒号:属