CSS教程(二)- CSS选择器

news2024/11/13 10:15:06

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.coloradmin.cn/o/2237849.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode 56.合并区间

思路&#xff1a; 类似于用最少的箭射气球题目&#xff0c;最主要是要处理区间之间是否有重叠&#xff0c;如果无重叠则加入数组&#xff0c;如果有重叠&#xff0c;则需要重新设判断的边界&#xff0c;与下一个区间继续判断。 难点在于 代码用法 需熟练掌握 思想简单&#…

【MySQL】MySQL基础知识复习(上)

前言 本篇博客将复习MySQL的基础知识&#xff0c;及着重复习CRUD&#xff08;增删查改&#xff09;操作。 目录 一.MySQL数据库基础知识 1.数据库操作 1.1显示当前的数据库 1.2 创建数据库 1.3 使用数据库 1.4 删除数据库 2.数据类型 2.1.数字类型 2.2字符串类型 2.3…

华为大变革?仓颉编程语言会代替ArkTS吗?

在华为鸿蒙生态系统中&#xff0c;编程语言的选择一直是开发者关注的焦点。近期&#xff0c;华为推出了自研的通用编程语言——仓颉编程语言&#xff0c;这引发了关于仓颉是否会取代ArkTS的讨论。本文将从多个角度分析这两种语言的特点、应用场景及未来趋势&#xff0c;探讨仓颉…

稀硫酸介质中 V 型球阀的材质选择与选型要点-耀圣

稀硫酸介质中 V 型球阀的材质选择与选型要点 在工业生产中&#xff0c;稀硫酸是一种常见的化学介质&#xff0c;对于输送和控制稀硫酸的阀门&#xff0c;正确的材质选择和选型至关重要。本文将介绍稀硫酸介质中 V 型球阀的材质选择&#xff0c;并提供一些选型的要点。 一、稀硫…

昇思大模型平台打卡体验活动:项目3基于MindSpore的GPT2文本摘要

昇思大模型平台打卡体验活动&#xff1a;项目3基于MindSpore的GPT2文本摘要 1. 环境设置 本项目可以沿用前两个项目的相关环境设置。首先&#xff0c;登陆昇思大模型平台&#xff0c;并进入对应的开发环境&#xff1a; https://xihe.mindspore.cn/my/clouddev 接着&#xff0…

定时器输入捕获实验配置

首先&#xff0c;第一个时基工作参数配置 HAL_TIM_IC_Init( ) 还是一样的套路&#xff0c;传参是一个句柄&#xff0c;先定义一个结构体 Instance&#xff1a;指向TIM_TypeDef的指针&#xff0c;表示定时器的实例。TIM_TypeDef是一个包含了定时器寄存器的结构体&#xff0c;用…

计算机视觉读书系列(1)——基本知识与深度学习基础

研三即将毕业&#xff0c;后续的工作可能会偏AI方向的计算机视觉方面&#xff0c;因此准备了两条线来巩固计算机视觉基础。 一个是本系列&#xff0c;阅读经典《Deep Learning for Vision System》&#xff0c;做一些总结跑一些例子&#xff0c;也对应本系列文章 二是OpenCV实…

运维智能化转型:AIOps引领IT运维新浪潮

1. AIOps是什么&#xff1f; AIOps&#xff08;Artificial Intelligence for IT Operations&#xff09;&#xff0c;即人工智能在IT运维中的应用&#xff0c;通过机器学习技术处理运维数据&#xff08;如日志、监控信息和应用数据&#xff09;&#xff0c;解决传统自动化运维…

SkyNet嵌入式系统目标检测实践测试分析

目标检测和跟踪对于资源受限的嵌入式系统来说是具有挑战性的任务。尽管这些任务是人工智能领域中计算量最大的任务之一&#xff0c;但它们在嵌入式设备上只能使用有限的计算和内存资源。与此同时&#xff0c;这种资源受限的实现通常需要满足额外的苛刻要求&#xff0c;如实时响…

「OC」SDWebimage的学习

「OC」SDWebimage的学习 前言 在知乎日报这个项目之中&#xff0c;我在很多情况下都会进行图片资源的网络申请。通过上网搜索我了解到了SDWebimage这个功能丰富的第三方库&#xff0c;进行了较为浅层的学习。因为SDWebimage这个库之中的相关内容还是较为多且复杂的&#xff0…

SIwave:释放 SIwizard 求解器的强大功能

SIwave 是一种电源完整性和信号完整性工具。SIwizard 是 SIwave 中 SI 分析的主要工具&#xff0c;也是本博客的主题。 SIwizard 用于研究 RF、clock 和 control traces 的信号完整性。该工具允许用户进行瞬态分析、眼图分析和 BER 计算。用户可以将 IBIS 和 IBIS-AMI 模型添加…

Kafka 可观测性最佳实践

Kafka 概述 Kafka 是由 LinkedIn 开发一个分布式的基于发布订阅模式的消息队列&#xff0c;是一个实时数据处理系统&#xff0c;可以横向扩展。与 RabbitMQ、RockerMQ 等中间件一样拥有几大特点&#xff1a; 异步处理服务解耦流量削峰 监控 Kafka 是非常重要的&#xff0c;因…

342--358作业整理(错误 + 重点)

目录 1. 在需要运行的类中 定义 main 方法 2. this 。访问逻辑&#xff1a;先访问本类中&#xff0c;再访问父类中可以访问的成员&#xff08;不包括和本类中重名的成员&#xff09; 3. super 。访问逻辑&#xff1a;super&#xff08;父类对象&#xff09;直接访问父类及以…

Android自启动管控

1. 自启动管控需求来源 自启动、关联启动、交叉启动、推送启动等现象的泛滥除了对个人信息保护带来隐患外&#xff0c;还会导致占用过多的系统CPU和内存资源&#xff0c;造成系统卡顿、发热、电池消耗过快&#xff1b;还可能引入一些包含“恶意代码”的进程在后台隐蔽启动&…

智能的编织:C++中auto的编织艺术

在C的世界里&#xff0c;auto这个关键字就像是一个聪明的助手&#xff0c;它能够自动帮你识别变量的类型&#xff0c;让你的代码更加简洁和清晰。下面&#xff0c;我们就来聊聊auto这个关键字的前世今生&#xff0c;以及它在C11标准中的新用法。 auto的前世 在C11之前&#x…

函数式编程Stream流(通俗易懂!!!)

重点&#xff1a;只关注传入的参数列表和方法体&#xff08;数据操作&#xff09; 1.Lambda表达式 本质是匿名内部类的优化&#xff0c;先写匿名内部类 1.1 基本用法 public class lambdaTest {public static void main(String[] args) { // int i calculateNum((…

C#里对数组的排序操作

一般情况下是采用 Array.Sort(a) 来进行排序。 例子代码如下: /** C# Program to Sort a String using Predefined Function*/ using System; class linSearch {public static void Main(){Console.WriteLine("Enter Number of Elements you Want to Hold in the Arra…

算法每日双题精讲——双指针(移动零,复写零)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…

【Android】View—基础知识,滑动,弹性滑动

基础知识 什么是View 在 Android 中&#xff0c;View 是用户界面&#xff08;UI&#xff09;中的基本组件&#xff0c;用于绘制图形和处理用户交互。所有的 UI 组件&#xff08;如按钮、文本框、图片等&#xff09;都是 View 的子类。可以说&#xff0c;View 是构建 Android …