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 中可能不起作用。
相关推荐
写代码的小王吧1 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
24白菜头2 小时前
C和C++(list)的链表初步
c语言·数据结构·c++·笔记·算法·链表
虾球xz2 小时前
游戏引擎学习第208天
学习·游戏引擎
小军要奋进2 小时前
httpx模块的使用
笔记·爬虫·python·学习·httpx
kfepiza3 小时前
`docker run --restart no,always,on-failure,unless-stopped`笔记250406
笔记·docker·容器
Leweslyh3 小时前
云计算:基础、概念与未来展望
学习·云计算·基础知识
kovlistudio4 小时前
红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
开发语言·前端·javascript·ide·学习·编辑器·webstorm
郭涤生4 小时前
Chapter 10: Batch Processing_《Designing Data-Intensive Application》
笔记·分布式
丶Darling.4 小时前
深度学习与神经网络 | 邱锡鹏 | 第三章学习笔记
深度学习·神经网络·学习