当前位置: 首页 > 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;已成为对齐语言模型…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...