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 中可能不起作用。
相关推荐
liang89991 小时前
Shiro学习(七):总结Shiro 与Redis 整合过程中的2个问题及解决方案
redis·学习·bootstrap
weixin_486281451 小时前
FFmpeg源码学习---ffmpeg
学习·ffmpeg
CodeCipher3 小时前
Java后端程序员学习前端之html
学习·html5
Dr_Zobot4 小时前
SLAM学习系列——ORB-SLAM3安装(Ubuntu20-ROS/Noetic)
学习·ubuntu·软件安装
珊瑚里的鱼4 小时前
第一讲 | 算法复杂度
c语言·开发语言·数据结构·笔记·算法·visualstudio·visual studio
枫叶20005 小时前
OceanBase数据库-学习笔记5-用户
数据库·笔记·学习·oceanbase
前端_yu小白5 小时前
css网格布局Grid
css·flex·网格布局·grid布局
OSwich5 小时前
【虚幻C++笔记】碰撞检测
c++·笔记·虚幻
黄同学real5 小时前
常见的 CSS 知识点整理
前端·css
Nuyoah.5 小时前
《Vue3学习手记7》
javascript·vue.js·学习