当前位置: 首页 > news >正文

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伪元素来设置元素内第一个字母的样式,如字体大小、颜色等‌
  • 示例
    在这里插入图片描述


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

相关文章:

CSS教程(二)- CSS选择器

1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器&#xff0c;根…...

Ubuntu20.04 解决一段时间后键盘卡死 输入延迟很大的问题 ubuntu

Ubuntu20.04 解决一段时间后键盘卡死 输入延迟很大的问题 为了确保您能顺利通过双击快捷方式来重启 IBus&#xff0c;下面详细描述了从脚本创建到快捷方式设置的每一步&#xff0c;包括具体的命令行操作和必要的说明&#xff0c;以确保您能够按步骤成功执行。 步骤 1: 创建并…...

http(s)接口设计注意事项

http(s)在设计时应考虑&#xff1a; 一、签名认证 鉴权&#xff0c;如jwt方式等。 二、重要参数加密 如&#xff1a;用户的登录密码、银行卡号、转账金额、用户身份证等。 三、IP白名单 为了进一步加强API接口的安全性&#xff0c;防止接口的签名或者加密被破解了&#x…...

Font Awesome Web 应用图标

Font Awesome Web 应用图标 引言 在当今的数字时代,图标在Web应用中扮演着至关重要的角色。它们不仅增强了用户界面的视觉吸引力,而且还提高了用户体验和互动性。Font Awesome是一个广受欢迎的图标库,它为开发人员提供了一系列高质量的图标,可以轻松地集成到Web应用中。本…...

bridge-vlan

# 1.topo # 2.创建命名空间 ip netns add ns0 ip netns add ns1 ip netns add ns2 ip netns add ns3 # 3.创建veth设备 ip link add ns0-veth0 type veth peer name hn0-veth0 ip link add ns1-veth0 type veth peer name hn1-veth0 ip link add ns2-veth0 type veth pe…...

【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件

MySQL与Oracle一样都是通过逻辑存储结构来管理物理存储结构&#xff0c;即管理硬盘上存储的各种文件。下面将详细介绍InnoDB存储引擎中的数据文件和重做日志文件。 一、数据文件 “.ibd”文件和ibdata文件 这两种文件都是存放Innodb数据的文件&#xff0c;之所以有两种文件来…...

华为云前台展示公网访问需要购买EIP,EIP流量走向

华为云前台网络&#xff08;VPC,安全组&#xff0c;EIP&#xff09; 1.EIP网段是从哪里划分的&#xff1f; 管理员在后台Service_OM已设置 Service_OM-网络资源-外部网络-创建外部网络基本信息&#xff1a;配置参数&#xff1a;*名称 public*网络类型 LOCAL 不带标签 类似开…...

排序算法 -插入排序

文章目录 1.插入排序&#xff08;Insertion Sort&#xff09;1.1 简介1.2 插入排序的步骤1.3 插入排序的C实现1.4 插入排序的时间复杂度1.5 插入排序的空间复杂度1.6 插入排序的动画 2. 二分插入排序&#xff08;Binary Insertion Sort&#xff09;2.1 简介2.2 二分插入排序步骤…...

如何使用.bat实现电脑自动重启?

1、在电脑桌面新建一个记事本文档&#xff0c;将如下内容写进去&#xff1a; echo off shutdown /r /t 02、然后&#xff0c;保存一下&#xff0c;再把桌面此文件重命名为电脑重启.bat 3、双击此程序&#xff0c;可以立刻重启电脑。 PS&#xff1a;① 此程序会不保存任何当前…...

使用VSCode远程连接服务器并解决Neo4j无法登陆问题

摘要&#xff1a;本文介绍了如何通过VSCode连接内网部署的Neo4j服务器&#xff0c;并启动服务。在访问Neo4j登录界面时&#xff0c;遇到了端口映射问题导致无法登录。通过手动添加7687端口的映射后&#xff0c;成功登录Neo4j。 我在内网部署了一台服务器&#xff0c;并在其上运…...

使用React和Vite构建一个AirBnb Experiences克隆网站

这一篇文章中&#xff0c;我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。 克隆网站最终呈现的效果&#xff1a; 1. 使用vite构建基础框架 npm create vitelatestcd airbnb-project npm install npm run dev2. 构建网站的3个部分 网站从上…...

HBase压测 ycsb

## ycsb 导入数据 rootXX.14.40.1971、对portrait压测 ansible hadoop -i hosts_hbase_portrait_20230730.txt -m shell -a "hostname && chdir/data/workspace/ycsb-0.17.0 nohup bin/ycsb load hbase20 -P workloads/workload_insert -cp /usr/local/fqlhadoop/…...

基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

项目名称&#xff1a;基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具&#xff1a;PyCharm、Visual Studio Code (VSCode)运行环境&#xff1a;Python 3.10、MySQL 8.0、Node.js 18技术框架&#xff1a;Django 5、Vue 3.4、Ant-Design-Vue 4.12 …...

网络安全web基础_HTML基础(扫盲篇)

web基础_HTML扫盲篇 一、什么是 HTML&#xff1f; 二、HTML 的基本特点 三、HTML 基本结构概述 1.文档声明&#xff08;!DOCTYPE html&#xff09; 2. html元素 3. head元素 4. body 元素 四、HTML5的主要标签清单 文档结构标签 文本内容标签 链接和锚点标签 表格标…...

(附项目源码)Java开发语言,监督管家APP的设计与实现 58,计算机毕设程序开发+文案(LW+PPT)

摘要 随着互联网的快速发展和智能手机的普及&#xff0c;越来越多的用户选择通过移动应用程序进行事项设定、提醒通知和事项打卡。监督管家APP作为一个专注于事项设定、提醒通知、事项打卡的监督管理平台&#xff0c;具有广泛的应用前景和商业价值。本研究旨在构建一个功能丰富…...

前端基础的讲解-JS(11)

对象 对象是什么&#xff1f; 在 JavaScript 中&#xff0c;对象是一组无序的相关属性和方法的集合&#xff0c;所有的事物都是对象&#xff0c;所有的数据类型都可以存放在内。 属性&#xff1a;即事物的特征&#xff0c;在对象中用属性来表示&#xff08;常用名词&#xf…...

Python魔法方法深度解析:解密__call__、__new__和__del__的核心奥义

解锁Python编程的无限可能&#xff1a;《奇妙的Python》带你漫游代码世界 《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门&#xff01; Python中的魔法方法&#xff08;Magic Methods&#xff09;是构建Python高级功能的基础&#xff0c;它们使得对象可以…...

当微软windows的记事本被AI加持

1985年&#xff0c;微软发布了Windows 1.0&#xff0c;推出了一款革命性的产品&#xff1a;记事本&#xff08;Notepad&#xff09;。这款软件旨在鼓励使用一种未来主义的新设备——鼠标&#xff0c;并让人们可以不依赖VI等键盘工具就能书写文本和编写代码。记事本因其简洁和高…...

Python酷库之旅-第三方库Pandas(213)

目录 一、用法精讲 996、pandas.DatetimeIndex.day属性 996-1、语法 996-2、参数 996-3、功能 996-4、返回值 996-5、说明 996-6、用法 996-6-1、数据准备 996-6-2、代码示例 996-6-3、结果输出 997、pandas.DatetimeIndex.hour属性 997-1、语法 997-2、参数 99…...

普林斯顿:LLM基于边际优化的梯度纠缠

&#x1f4d6;标题&#xff1a;A Common Pitfall of Margin-based Language Model Alignment: Gradient Entanglement &#x1f310;来源&#xff1a;arXiv, 2410.13828 &#x1f31f;摘要 &#x1f538;从人类反馈中强化学习&#xff08;RLHF&#xff09;已成为对齐语言模型…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...