CSS教程(二)- CSS选择器

1. 作用

  • 匹配文档中的某些元素为其应用样式。
  • 根据不同需求把不同的标签选出来。

2. 分类

  • 分类
    • 基础选择器
      • 包含 标签选择器、ID选择器、类选择器、通用选择器等
    • 复合选择器
      • 包含 后代选择器、子代选择器、伪类选择器等

1 标签选择器

  • 介绍

    • 又称为元素选择器,根据标签名匹配文档中所有该元素,为页面中某一类标签指定统一的CSS样式
  • 语法

    标签名{属性1: 属性值1;属性2: 属性值2;...
    }
    

在这里插入图片描述

  • 示例
    在这里插入图片描述

  • 说明

    • 选择器:指需设置样式的 HTML 元素。
    • 声明块包含一条或多条用分号分隔的声明。
    • 每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
    • 多条 CSS 声明用分号分隔,声明块用花括号括起来。
  • 优点

    • 能快速为页面中同类型的标签统一设置样式。
  • 缺点

    • 不能设计差异化样式,只能选择全部的当前标签。

2 ID选择器

  • 介绍

    • 根据元素的 id 属性值匹配文档中唯一的元素,id具有唯一性,不能重复使用。
    • 在 CSS 中 ID选择器以 # 来定义
  • 语法

      #id属性值{属性1: 属性值1;属性2: 属性值2;...}
    
  • 示例
    在这里插入图片描述

  • 注意

    • id属性值自定义,可以由数字、字母、下划线、- 组成,不能以数字开头;
    • 尽量见名知意,多个单词组成时,可以使用连接符,下划线,小驼峰表示。
  • 口诀

    • 样式#定义,结构id调用,只能调用一次

3 类选择器

  • 介绍

  • 想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

    • 根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用(简言之:用于查找或选取要设置样式的 HTML元素)
  • 语法

    .类名 {属性1: 属性值1;属性2: 属性值2;... 	
    }
    
  • 示例
    在这里插入图片描述

  • 说明

    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
    • 命名要有意义,尽量使别人一眼就知道这个类名的目的。
  • 口诀

    • 样式定义,结构调用
  • 特殊用法

    1. 类选择器与其他选择器结合使用

      a.c1{ }
      
      • 注意:标签与类选择器结合时,标签在前,类选择器在后
    2. class属性值可以写多个(多个类名之间必必须用 空格 分开),共同应用类选择器的样式

      <p class="c1 c2"></p>
      
  • 示例
    在这里插入图片描述


4 通用选择器

  • 介绍

    • 通配符选择器使用 * 定义,它表示选取页面中所有元素(标签)。
  • 语法

    * {属性1: 属性值1;属性2: 属性值2;...
    }
    
  • 说明

    • 通常在最开始对页面设置内边距与外边距的设置(默认body与页面会存在边距)。

      *{padding: 0;margin: 0;
      }
      
  • 示例
    在这里插入图片描述


5 群组选择器

  • 介绍

    • 也称为并集选择器,可以使用多个不同的选择器为一组元素统一设置样式。
  • 语法

    selector1,selector2,selector3{	属性1: 属性值1;属性2: 属性值2;...    
    }
    
  • 示例
    在这里插入图片描述

6 后代选择器

  • 介绍

    • 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
  • 语法

    selector1 selector2{属性1: 属性值1;属性2: 属性值2;...
    }
    
  • 说明

    • 匹配selector1中所有满足selector2的后代元素
    • selector1 与 selector2 可以是任意的基础选择器
  • 示例
    在这里插入图片描述


7 子代选择器

  • 介绍

    • 匹配满足选择器的所有直接子元素,只能选择作为某元素的最近一级子元素
  • 语法

    selector1>selector2{属性1: 属性值1;属性2: 属性值2;...    
    }
    
  • 说明

    • selector2 必须是 selector1 的亲子元素
  • 示例
    在这里插入图片描述


8 伪类选择器

  • 介绍

    • 为元素的不同状态分别设置样式,必须与基础选择器结合使用。
  • 特点

    • 用冒号(:)表示,如::hover、:first-child、:last_child

1、链接伪类选择器

  • 分类

    :link 	     超链接访问前的状态
    :visited    超链接访问后的状态
    :hover	 鼠标滑过时的状态
    :active     鼠标点按不抬起时的状态(激活)
    
  • 示例

    在这里插入图片描述

  • 注意

    1. 超链接如果需要为四种状态分别设置样式,则按照以下顺序【LVHA】声明

      :link
      :visited
      :hover
      :active
      
    2. 超链接常用设置 :

      a{/*统一设置超链接默认样式(不分状态)*/
      }a:hover{/*鼠标滑过时改样式*/
      }
      

2、焦点伪类选择器

  • :focus

    • 用于选取获得焦点的表单元素。
    • 一般情况 <input> 类表单元素才能获取
  • 示例
    在这里插入图片描述


3、结构伪类选择器

  • 作用

    • 根据元素的结构关系查找元素
  • 选择器

    选择器说明
    E:first-child查找第1个E元素
    E:last-child查找最后一个E元素
    E:nth-child(N)查找第N个E元素(第1个元素N值为1)
  • :nth-child(公式)

    • 作用:根据元素的关系结构查找多个元素

      公式功能
      2n偶数标签
      2n+1; 2n-1奇数标签
      5n找到5的倍数的标签
      n+5找到第5个以后的标签
      -n+5找到第5个以前的标签
  • 示例
    在这里插入图片描述


4、伪元素选择器

  • 作用

    • 创建虚拟 元素(伪元素),用来摆放装饰性的内容
  • 选择器

    选择器说明
    E::before在E元素里面最前面添加一个伪元素
    E::after在E元素里面最后面添加一个伪元素
  • 注意

    • 必须设置 content: “” 属性,用来设置 伪元素的内容,如果无内容,则引号留白即可
    • 微元素必须是 行内 显示模式
    • 权重 标签选择器 相同。
  • 应用场景

    • 插入内容‌:使用::before和::after伪元素在元素的前后插入内容,如在段落前添加引用符号、图标装饰等‌
    • 分割符号‌:使用::before和::after伪元素在列表项之间添加分割线或其他符号,提高列表的可读性‌
    • 清除浮动‌:使用::after伪元素来清除浮动,保证容器正确包裹元素‌
    • 首行缩进‌:使用::first-line伪元素来设置元素内第一行的样式,如字体、颜色等‌
    • 首字母样式‌:使用::first-letter伪元素来设置元素内第一个字母的样式,如字体大小、颜色等‌
  • 示例
    在这里插入图片描述


  • 总结
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469036.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第二十周学习周报

目录 摘要abstractTheory behind GANGAN训练目标GAN训练技巧 总结 摘要 本周的学习内容是GAN的基本理论&#xff0c;在训练GAN的时候&#xff0c;Generator的目标是希望生成的数据与真实的数据越相似越好&#xff0c;而Discriminator的目标是尽量将生成的数据与真实的数据区分…

2024年CRM系统对比:国内外十大CRM热门选择

在数字化转型的大潮中&#xff0c;CRM系统是企业提升客户关系管理、优化销售流程的重要工具。本文将从系统功能、优势、劣势、总体评价四个方面&#xff0c;对2024年国内外十大热门CRM系统进行全方位对比&#xff0c;帮助企业找到最适合的CRM解决方案。 1.纷享销客CRM 系统功…

VideoChat:开源的数字人实时对话系统,支持自定义数字人的形象和音色

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

[CKS] TLS Secrets创建与挂载

目前的所有题目为2024年10月后更新的最新题库&#xff0c;考试的k8s版本为1.31.1 BackGround 您必须使用存储在TLS Secret中的SSL文件&#xff0c;来保护Web 服务器的安全访问。 Task 在clever-cactus namespace中为名为clever-cactus的现有Deployment创建名为clever-cactu…

使用 wxPython 开发 Python 桌面应用程序的完整教程

使用 wxPython 开发 Python 桌面应用程序的完整教程 引言 在当今的软件开发领域&#xff0c;桌面应用程序仍然占据着重要的位置。Python 作为一种灵活且易于学习的编程语言&#xff0c;结合 wxPython 库&#xff0c;可以快速构建跨平台的桌面应用程序。本文将深入探讨 wxPyth…

自动驾驶系列—自动驾驶环境感知:Radar数据的应用与实践

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

DimensionX:从单张图片生成高度逼真的 3D 和 4D 场景

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

蓝桥杯备考——算法

一、排序 冒泡排序、选择排序、插入排序、 快速排序、归并排序、桶排序 二、枚举 三、二分查找与二分答案 四、搜索&#xff08;DFS&#xff09; DFS&#xff08;DFS基础、回溯、剪枝、记忆化&#xff09; 1.DFS算法&#xff08;深度优先搜索算法&#xff09; 深度优先搜…

【网络面试篇】其他面试题——Cookie、Session、DNS、CDN、SSL/TLS、加密概念

目录 一、HTTP 相关问题 1. Cookie 和 Session 是什么&#xff1f; &#xff08;1&#xff09;Cookie &#xff08;2&#xff09;Session 2. Cookie 的工作原理&#xff1f; 3. Session 的工作原理&#xff1f; 4. Cookie 和 Session 有什么区别&#xff1f; 二、其他问…

隧道论文阅读2-采用无人融合扫描数据的基于深度学习的垂直型隧道三维数字损伤图

目前存在的问题&#xff1a; 需要开发新的无人测量系统测量垂直隧道图像数据量巨大&#xff0c;基于深度学习完成损伤评估跟踪获取图像位置的困难&#xff0c;对大型基础设施感兴趣区域(roi)的2d和3d地图建立进行了研究&#xff0c;对整个目标结构的损伤定位仍然具有挑战性。为…

CCF-A类 HPCA 2025 重磅揭晓:录取数据公布

近日&#xff0c;第31届国际计算机体系结构领域顶级会议HPCA (International Symposium on High Performance Computer Architecture) 正式发布了2025年会议的录用通知&#xff01;本届会议共收到了534 篇提交论文&#xff0c;其中&#xff0c;112篇论文被接收&#xff0c;整体…

Linux应用——线程池

1. 线程池要求 我们创建线程池的目的本质上是用空间换取时间&#xff0c;而我们选择于 C 的类内包装原生线程库的形式来创建&#xff0c;其具体实行逻辑如图 可以看到&#xff0c;整个线程池其实就是一个大型的 CP 模型&#xff0c;接下来我们来完成它 2. 整体模板 #pragma …

IDM扩展添加到Edge浏览器

IDM扩展添加到Edge浏览器 一般情况下&#xff0c;当安装IDM软件后&#xff0c;该软件将会自动将IDM Integration Module浏览器扩展安装到Edge浏览器上&#xff0c;但在某些情况下&#xff0c;需要我们手动安装&#xff0c;以下为手动安装步骤 手动安装IDM扩展到Edge浏览器 打…

docker 拉取MySQL8.0镜像以及安装

目录 一、docker安装MySQL镜像 搜索images 拉取MySQL镜像 二、数据挂载 在/root/mysql/conf中创建 *.cnf 文件 创建容器,将数据,日志,配置文件映射到本机 检查MySQL是否启动成功&#xff1a; 三、DBeaver数据库连接 问题一、Public Key Retrieval is not allowed 问题…

深入探索Waymo自动驾驶技术发展:从DARPA挑战赛到第五代系统的突破

引言 自动驾驶技术正引领着未来出行方式的革命&#xff0c;而Waymo作为全球自动驾驶领域的先锋&#xff0c;始终走在技术发展的最前沿。本文基于Waymo联席CEO德米特里多尔戈夫&#xff08;Dmitri Dolgov&#xff09;在No Priors节目中的访谈&#xff0c;全面介绍Waymo的技术发展…

鸿蒙移动应用开发-------初始arkts

一. 什么是arkts ArkTS是HarmonyOS优选的主力应用开发语言。 ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;保持了TS的基本风格&#xff0c;同时通过规范定义强化开发期静态检查和分析&#xff0c;提升程序执行稳定性和…

c++ 输入三条边 绘制三角形

安装图形库 参考 #include "graphics.h" // 就是需要引用这个图形库 #include <conio.h> #include <stdio.h> #include <math.h>// 判断是否可以构成三角形 int isTriangle(int a, int b, int c) {return (a b > c) && (a c >…

A20红色革命文物征集管理系统

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

Logrus入门

Logrus入门 1. 下载 go get github.com/sirupsen/logrus2. logrus常用方法 logrus.Debugln("Debugln") logrus.Infoln("Infoln") logrus.Warnln("Warnln") logrus.Errorln("Errorln") logrus.Println("Println")// 输出如…

pyspark入门基础详细讲解

1.前言介绍 学习目标&#xff1a;了解什么是Speak、PySpark&#xff0c;了解为什么学习PySpark&#xff0c;了解课程是如何和大数据开发方向进行衔接 使用pyspark库所写出来的代码&#xff0c;既可以在电脑上简单运行&#xff0c;进行数据分析处理&#xff0c;又可以把代码无缝…