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 中可能不起作用。
相关推荐
遇见尚硅谷29 分钟前
C语言:20250728学习(指针)
c语言·开发语言·数据结构·c++·笔记·学习·算法
Aronup39 分钟前
NLP学习开始01-线性回归
学习·自然语言处理·线性回归
墨迹的陌离2 小时前
【Linux】重生之从零开始学习运维之Mysql
linux·运维·服务器·数据库·学习·mysql
这就是佬们吗3 小时前
初识 docker [上]
java·开发语言·笔记·docker·容器
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
幻风_huanfeng3 小时前
学习人工智能所需知识体系及路径详解
人工智能·学习
试着3 小时前
零基础学习性能测试第六章:性能难点-Jmeter文件上传场景压测
学习·jmeter·零基础·性能测试
小一亿4 小时前
【0基础PS】PS工具详解--选择工具--对象选择工具
学习·平面·adobe·信息可视化·传媒·photoshop
Star在努力4 小时前
15-C语言:第15天笔记
c语言·笔记·算法
cyr___4 小时前
Unity教程(二十四)技能系统 投剑技能(中)技能变种实现
学习·游戏·unity·游戏引擎