CSS Id 和 Class 选择器学习笔记

一、概述

在 CSS 中,idclass 选择器是用于为 HTML 元素指定样式的强大工具。它们可以帮助我们精确地控制页面中元素的样式,让页面设计更加灵活和高效。

二、id 选择器

1. 定义和使用

  • 定义id 选择器用于为具有特定 id 属性的 HTML 元素指定样式。在 CSS 中,id 选择器以 # 开头。

  • 示例

    HTML复制

    复制代码
    <p id="para1">这是一个段落。</p>

    预览

    css复制

    复制代码
    #para1 {
      text-align: center;
      color: red;
    }

    在这个例子中,id="para1" 的段落会居中显示,并且文字颜色为红色。

2. 注意事项

  • id 属性的值在文档中必须是唯一的,即一个 id 只能用于一个元素。

  • id 属性的值不能以数字开头,否则在 Mozilla/Firefox 浏览器中可能不起作用。

三、class 选择器

1. 定义和使用

  • 定义class 选择器用于描述一组元素的样式。与 id 选择器不同,class 可以在多个元素中使用。在 HTML 中,class 选择器以 class 属性表示,在 CSS 中,类选择器以 . 开头。

  • 示例

    HTML复制

    复制代码
    <p class="center">这是一个段落。</p>
    <div class="center">这是一个 div 元素。</div>

    预览

    css复制

    复制代码
    .center {
      text-align: center;
    }

    在这个例子中,所有拥有 class="center" 的 HTML 元素都会居中显示。

2. 特定元素的 class 使用

  • 你可以指定特定的 HTML 元素使用 class。例如,只为 <p> 元素应用某个样式:

    HTML复制

    复制代码
    <p class="center">这是一个段落。</p>

    预览

    css复制

    复制代码
    p.center {
      text-align: center;
    }

    在这个例子中,只有 <p> 元素会应用 center 类的样式。

3. 多个 class 的使用

  • 一个元素可以拥有多个 class,这些 class 之间用空格分隔。

  • 示例

    HTML复制

    复制代码
    <p class="center color">这是一个段落。</p>

    预览

    css复制

    复制代码
    .center {
      text-align: center;
    }
    .color {
      color: #ff0000;
    }

    在这个例子中,段落会居中显示,并且文字颜色为红色。

4. 注意事项

  • 类名的第一个字符不能使用数字,否则在 Mozilla 或 Firefox 中可能不起作用。
相关推荐
lichenyang45329 分钟前
css模块化以及rem布局
前端·javascript·css
Chef_Chen35 分钟前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
棉花糖超人38 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
阿絮~2 小时前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟7 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟9 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠9 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj9 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
Sally璐璐10 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062710 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html