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

css3常见选择器

使用工具 Visual Studio Code

1.CSS3基础选择器

1.1 标签选择器 

1.2.1 标签选择器的语法

一个完整的HTML5页面是由很多不同的标签组成的,而标签选择器则决定标签应采用的CSS样式,语法如下:
标签名{

        属性1:属性值1;

        属性2:属性值2;

}
所有的HTML5标签都可以作为标签选择器

1.2 类选择器

1.2.1 类选择器的语法

类选择器使用英文"."进行标识,后面紧跟类名,语法如下:
.类名{

        属性1:属性值1;

        属性2:属性值2;

}

1.2.2 类选择器的引用方法

类名为HTML5元素的class属性,即<标签名 class="类名">标签内容</标签名>;
类名的第一个字符不能使用数字,并且严格区分大小写 ;
<标签名 class = "class名">标签内容</标签名>;

1.3 id选择器

1.3.1 id选择器的语法

在CSS中,ID选择器使用"#"进行标识,后面紧跟ID名,语法如下:
#ID名{

属性1:属性值1;

属性2:属性值2;

}

1.3.2 id选择器的引用方法

<标签名 ID = "ID名">标签内容</标签名>;
ID选择器在HTML页面中只能使用一次;

1.4 基础选择器的优先级

三种选择器的优先级是
id选择器>类选择器>标签选择器

2. CSS3高级选择器

CSS3高级选择器包含层次选择器、结构伪类选择器和属性选择器;

2.1 层次选择器

2.1.4 后代选择器

    用来选择特定元素或元素组的后代,将对付元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。(就是表示前面那个标签中所有的后面那个标签)

2.1.4 子选择器

    子选择器与后代选择器容易混淆,因此请注意子选择器仅指它的直接后代,也可以理解为作用于子元素的第一个后代。子选择器通过>标识符进行选择(就是表示前面那个标签中有直接关系的后面那个标签)

2.2 结构伪类选择器

在最后一个标签后加一个标签可以查找该父标签内内容的第几个该标签

2.2.1 first-child选择器 

用于为父元素的第一个子元素设置样式;
选择子级第一个;

2.2.2 last-child选择器

用于为父元素的最后一个子元素设置样式;
选择子级最后一个;

2.2.3 nth-child(n)选择器

用于为父元素的第n个子元素设置样式;
选择子级第n个;

2.2.4 first-of-type选择器

用于选择父元素下相同类型子元素的第一个;
选择父标签中寻找类型寻找标签子元素的第一个;

2.2.5 last-of-type选择器

用于选择父元素下相同类型子元素的最后一个;
选择父标签中寻找类型寻找标签子元素的最后一个;

2.2.6 nth-of-type(n)选择器

用于选择父元素下相同类型子元素的第n个;
选择父标签中寻找类型寻找标签子元素的第n个;

2.3 属性选择器

attr填写属性
val自定义值
E可以是HTML5中的任意标签

2.3.1 E[attr]

选择匹配具有属性attr的E元素;

2.3.2 E[attr=val]

选择匹配具有属性attr的E元素,并且属性的值为val(val区分大小写);
选中与输入值相等的;

2.3.3 E[attr^=val]

选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串;

2.3.4 E[attr$=val]

选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串;

2.3.5 E[attr*=val]

选择匹配元素E,且E元素定义了属性attr,其属性值包含了"val";

相关文章:

css3常见选择器

使用工具 Visual Studio Code 1.CSS3基础选择器 1.1 标签选择器 1.2.1 标签选择器的语法 一个完整的HTML5页面是由很多不同的标签组成的&#xff0c;而标签选择器则决定标签应采用的CSS样式&#xff0c;语法如下:标签名{ 属性1&#xff1a;属性值1&#xff1b; 属性2&…...

List(CS61B学习记录)

问题引入 上图中&#xff0c;赋给b海象的weight会改变a海象的weight&#xff0c;但x的赋值又不会改变y的赋值 Bits 要解释上图的问题&#xff0c;我们应该从Java的底层入手 相同的二进制编码&#xff0c;却因为数据类型不同&#xff0c;输出不同的值 变量的声明 基本类型…...

Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 1、线条折线曲面

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 代码: import pandas as pd import matplotlib.pyplot as plt import numpy as np from mpl_toolkits.mplot3d import Axes3D from matplotlib.colors import ListedColor…...

2024年华为HCIA-DATACOM新增题库(H12-811)

801、[单选题]178/832、在系统视图下键入什么命令可以切换到用户视图? A quit B souter C system-view D user-view 试题答案&#xff1a;A 试题解析&#xff1a;在系统视图下键入quit命令退出到用户视图。因此答案选A。 802、[单选题]“网络管理员在三层交换机上创建了V…...

离线安装数据库 mysql 5.7 linux

离线安装数据库 mysql 5.7 linux 方法一 参考链接Linux(Debian10.2)安装MySQL5.7.24环境 赋予文件执行权限chmod x 文件名 使用root用户sudo su解压文件tar xvf mysql-5.7.42-linux-glibc2.12-x86_64.tar.gz重命名mv mysql-5.7.42-linux-glibc2.12-x86_64 mysql将桌面的mys…...

2024-03-14学习笔记(YoloV9)

1.认知越高的人&#xff0c;越敬畏因果 摘要&#xff1a;本文讲述了认知越高的人越敬畏因果的道理。通过故事和名人案例&#xff0c;阐述了敬畏因果对于个人成长和成功的重要性。文章强调了遵循规律、不走捷径、正向思维的重要性&#xff0c;以及思维、行动、习惯、性格和命运…...

Cookie和Session介绍

1、Cookie的一些重要结论&#xff08;令牌&#xff0c;类似就诊卡记住我们的信息&#xff09;&#xff1a; &#xff08;1&#xff09;Cookie从哪里来&#xff1a;服务器返回给浏览器的&#xff0c;通常是首次访问/登录成功之后&#xff08;cookie是在header中传输&#xff09…...

OpenCV 将rgb图像转化成字符图像

将RGB图像转换成字符图像&#xff08;ASCII art&#xff09;通常涉及到灰度化、降采样、映射字符等一系列步骤。以下是一个简化的OpenCVC实现示例&#xff1a; #include <opencv2/opencv.hpp> #include <iostream> #include <string>// 字符映射表&#xff…...

ios开发错误积累

1.xcode 下载模拟器报错 Could not download iOS 报错&#xff1a; 解决&#xff1a; 1、去官网下载自己需要 地址&#xff08;https://developer.apple.com/download/all&#xff09; 2、下载完成后&#xff0c;执行以下命令添加&#xff1a;xcrun simctl runtime add /路径…...

软件实际应用实例,物流打印用什么软件,佳易王物流货运快运单打印查询管理系统软件,可以在已经印刷好的单子上打印,也可直接打印

软件实际应用实例&#xff0c;物流打印用什么软件&#xff0c;佳易王物流货运快运单打印查询管理系统软件&#xff0c;可以在已经印刷好的单子上打印&#xff0c;也可直接打印 一、前言 以下软件教程以 佳易王物流单打印查询管理系统软件V17.0为例说明 软件文件下载可以点击…...

第六届上海国际垃圾焚烧发电展将于12月11-13日上海举办

第六届上海国际垃圾焚烧发电暨固废处理技术展览会 2024年12月11-13日 上海新国际博览中心 主办单位&#xff1a;中华环保联合会 废弃物发电专委会 支持单位&#xff1a;垃圾焚烧技术与装备国家工程实验室 承办单位&#xff1a;上海怡涵展览服务有限公司 展会介绍&#xff1a…...

pytorch(十)循环神经网络

文章目录 卷积神经网络与循环神经网络的区别RNN cell结构构造RNN例子 seq2seq 卷积神经网络与循环神经网络的区别 卷积神经网络&#xff1a;在卷积神经网络中&#xff0c;全连接层的参数占比是最多的。 卷积神经网络主要用语处理图像、语音等空间数据&#xff0c;它的特点是局部…...

【黑马程序员】Python文件、异常、模块、包

文章目录 文件操作文件编码什么是编码为什么要使用编码 文件的读取openmodel常用的三种基础访问模式读操作相关方法 文件的写入注意代码示例 异常定义异常捕获捕获指定异常捕获多个异常捕获所有异常异常else异常finally 异常的传递 python 模块定义模块的导入import模块名from …...

导入fetch_california_housing 加州房价数据集报错解决(HTTPError: HTTP Error 403: Forbidden)

报错 HTTPError Traceback (most recent call last) Cell In[3], line 52 from sklearn.datasets import fetch_california_housing3 from sklearn.model_selection import train_test_split ----> 5 X, Y fetch_california_housing(retu…...

后勤管理系统|基于SSM 框架+vue+ Mysql+Java+B/S架构技术的后勤管理系统设计与实现(可运行源码+数据库+设计文档+部署说明+视频演示)

目录 文末获取源码 前台首页功能 员工注册、员工登录 个人中心 公寓信息 员工功能模块 员工积分管理 管理员登录 ​编辑管理员功能模块 个人信息 ​编辑员工管理 公寓户型管理 ​编辑公寓信息管理 系统结构设计 数据库设计 luwen参考 概述 源码获取 文末获取源…...

【办公类-40-01】20240311 用Python将MP4转MP3提取音频 (家长会系列一)

作品展示&#xff1a; 背景需求&#xff1a; 马上就要家长会&#xff0c;我负责做会议前的照片滚动PPT&#xff0c;除了大量照片视频&#xff0c;还需要一个时间很长的背景音乐MP3 一、下载“歌曲串烧” 装一个IDM 下载三个“串烧音乐MP4”。 代码展示 家长会背景音乐: 歌曲串…...

人类的谋算与量子计算

量子计算并不等价于并行计算。量子计算和并行计算是两种不同的计算模型。 在经典计算中&#xff0c;通过增加计算机的处理器核心和内存等资源&#xff0c;可以实现并行计算&#xff0c;即多个任务同时进行。并行计算可以显著提高计算速度&#xff0c;尤其是对于可以被细分为多个…...

【数据结构和算法初阶(C语言)】栈的概念和实现(后进先出---后来者居上的神奇线性结构带来的惊喜体验)

目录 1.栈 1.1栈的概念及结构 2.栈的实现 3.栈结构对数据的处理方式 3.1对栈进行初始化 3.2 从栈顶添加元素 3.3 打印栈元素 3.4移除栈顶元素 3.5获取栈顶元素 3.6获取栈中的有效个数 3.7 判断链表是否为空 3.9 销毁栈空间 4.结语及整个源码 1.栈 1.1栈的概念及结构 栈&am…...

搭建mysql主从复制(主主复制)

1&#xff1a;设主库允许远程连接(注意&#xff1a;设置账号密码必须使用的插件是mysql_native_password&#xff0c;其他的会连接失败) #切换到mysql这个数据库&#xff0c;修改user表中的host&#xff0c;使其可以实现远程连接 mysql>use mysql; mysql>update user se…...

centos 系统 yum 无法安装(换国内镜像地下)

centos 系统 yum 因为无法连接到国外的官网而无法安装&#xff0c;问题如下图&#xff1a; 更换阿里镜像&#xff0c;配置文件路径&#xff1a;/etc/yum.repos.d/CentOS-Base.repo&#xff08;如果目录有多余的文件可以移动到子目录&#xff0c;以免造成影响&#xff09; bas…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...