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";

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

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

相关文章

Vscode 修改C++版本

1. 首先要检查GCC版本&#xff0c;有的gcc版本过低会导致C版本升级不成功 可以用cmd&#xff0c;用gcc --version命令查看gcc版本 我这里就是gcc版本较低&#xff0c;不支持c17 需要先升级gcc版本 gcc与c对应的版本&#xff0c;大家可以在这位大佬的博客中看&#xff0c;写…

python 读取pdf 将每页转成jpg

需要安装fitz pip install PyMuPDF 这里我发现了问题,默认安装最新版本1.21.x 但是不支持大部分网上的api 所以分开两部分 1.21.x的 import fitz # PyMuPDF from PIL import Imagedef extract_images_from_tiff(tiff_path, output_folder):# 打开 TIFF 文件pdf_document f…

经典排序算法之计数排序|c++代码实现

引言 排序算法c实现系列第8弹——计数排序。 计数排序是理解起来相对简单的一个排序算法&#xff0c; 计数排序 计数排序&#xff08;Counting Sort&#xff09;是一种非比较型的排序算法&#xff0c;它的基本思想是统计待排序数组中每个元素的出现次数&#xff0c;然后根据…

基于grafana+elk等开源组件的 云服务监控大屏架构

本套大屏,在某云服务大规模测试环境,良好运行3年. 本文主要展示这套监控大屏的逻辑架构.不做具体操作与配置的解释. 监控主要分为三部分: 数据展示部分数据存储数据采集 1. 数据展示 数据展示方面主要使用grafana 2. 数据存储 根据数据种类和特性和用途的不同,本套监控采…

Intelli idea 自带maven路径和配置

自带maven位于&#xff1a;plugins/maven/lib/maven3 Mac配置maven环境变量&#xff1a; #maven export MAVEN_HOME/maven根路径 export PATH$MAVEN_HOME/bin:$PATH#刷新环境变量 source ~/.bash_profile#查看maven版本 mvn -version#查看依赖树 mvn dependency:tree 配置ma…

django-q轻量级定时任务制定

django-q ,celery&#xff0c;apschedule都可以作为python的选型&#xff0c;但是django-q更轻量级&#xff0c;可以定制想要的任务&#xff0c;通过消息中间件&#xff0c;来实现不太高并发的实现 官网介绍地址 django-q官网地址 本次测试的是python3.12版本 首先需要安装dja…

几何相互作用GNN预测3D-PLA

预测PLA是药物发现中的核心问题。最近的进展显示了将ML应用于PLA预测的巨大潜力。然而,它们大多忽略了复合物的3D结构和蛋白质与配体之间的物理相互作用,而这对于理解结合机制至关重要。作者提出了一种结合3D结构和物理相互作用的几何相互作用图神经网络GIGN,用于预测蛋白质…

架构实战--以海量存储系统讲解热门话题:分布式概念

关注我&#xff0c;持续分享逻辑思维&管理思维&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 有意找工作的同学&#xff0c;请参考博主的原创&#xff1a;《面试官心得--面试前应该如何准备》&#xff0c;《面试官心得--面试时如何进行自…

Nodejs 第五十七章(addon)

Nodejs在IO方面拥有极强的能力&#xff0c;但是对CPU密集型任务&#xff0c;会有不足&#xff0c;为了填补这方面的缺点&#xff0c;Nodejs支持c/c为其编写原生nodejs插件&#xff0c;补充这方面的能力。 Nodejs c扩展 c编写的代码能够被编译成一个动态链接库(dll),可以被nod…

VMware workstation的安装

VMware workstation安装&#xff1a; 1.双击VMware-workstation-full-9.0.0-812388.exe 2.点击next进行安装 选择安装方式 Typical&#xff1a;典型安装 Custom&#xff1a;自定义安装 选择程序安装位置 点击change选择程序安装位置&#xff0c;然后点击next 选择是否自动…

vue 如何实现手机横屏功能

功能背景 有些需求需要手动实现横屏功能&#xff0c;比如点击一个横屏的图标将整个页面90度翻转&#xff0c;再点击退出横屏回到正常页面。 实现思路 一拿到这个需求很可能就被吓到了&#xff0c;但简单来说&#xff0c;就是点击横屏按钮跳转一个新页面&#xff0c;通过 cs…

MySQL模块---安装并配置

1. 在项目中操作数据库的步骤 ① 安装操作 MySQL 数据库的第三方模块&#xff08;mysql&#xff09; ② 通过 mysql 模块链接到 MySQL 数据库 ③ 通过 mysql 模块执行 SQL 语句 2. 安装 mysql 模块 这里要安装的是 mysql2 也就是 mysql 8.0后面的版本 npm init -y npm…

手动创建线程池各个参数的意义?

今天我们学习线程池各个参数的含义&#xff0c;并重点掌握线程池中线程是在什么时机被创建和销毁的。 线程池的参数 首先&#xff0c;我们来看下线程池中各个参数的含义&#xff0c;如表所示线程池主要有 6 个参数&#xff0c;其中第 3 个参数由 keepAliveTime 时间单位组成。…

【Linux】linuxCNC+Qt+Opencascade+kdl+hal 实时6轴机器人控制器

CNC机器人 程序框架 机器人模型 笔记&#xff1a; debian重启后 无法打开共享目录 最新版搜狗输入法安装后不支持中文&#xff0c;需要安装旧版本的 sogoupinyin_4.0.1.2800_x86_64.deb可用 数控机器人在哪些领域应用有优势 数控机器人在多个领域都展现出了显著的优势&#xff…

介绍一下redis中底层磁盘及IO模型,数据持久化机制,哨兵机制

底层磁盘及IO模型&#xff1a; Redis中的数据存储在内存中&#xff0c;但为了保证数据的持久化&#xff0c;Redis还提供了两种数据持久化方式&#xff1a;RDB&#xff08;Redis DataBase&#xff09;和AOF&#xff08;Append-Only File&#xff09;。 RDB&#xff1a;RDB是一种…

PyQt4应用程序的PDF查看器

最近因为项目需要创建一个基于PyQt4的PDF查看器应用程序&#xff0c;正常来说&#xff0c;我们可以使用PyQt4的QtWebKit模块来显示PDF文件。那么具体怎么实现呢 &#xff1f;以下就是我写的一个简单的示例代码&#xff0c;演示如何创建一个PyQt4应用程序的PDF查看器&#xff1a…

SQL笔记 -- 黑马程序员

SQL目录 文章目录 SQL目录一、SQL分类1、DDL2、数据类型3、DML4、DQL1&#xff09;基本查询2&#xff09;条件查询3&#xff09;聚合函数查询4&#xff09;分组查询5&#xff09;排序查询6&#xff09;分页查询 5、DCL 一、SQL分类 分类说明DDL数据定义语言&#xff0c;用来定…

MySQL order by 语句执行流程

全字段排序 假设这个表的部分定义是这样的&#xff1a; CREATE TABLE t (id int(11) NOT NULL,city varchar(16) NOT NULL,name varchar(16) NOT NULL,age int(11) NOT NULL,addr varchar(128) DEFAULT NULL,PRIMARY KEY (id),KEY city (city) ) ENGINEInnoDB; 有如下 SQL 语…

蓝桥杯2023年-三国游戏(贪心)

题目描述 小蓝正在玩一款游戏。游戏中魏蜀吴三个国家各自拥有一定数量的士兵X, Y, Z (一开始可以认为都为 0 )。游戏有 n 个可能会发生的事件&#xff0c;每个事件之间相互独立且最多只会发生一次&#xff0c;当第 i 个事件发生时会分别让 X, Y, Z 增加Ai , Bi ,Ci 。 当游戏…

UG NX二次开发(C#)-通过控制点创建样条曲线(UF_CURVE_create_spline )

文章目录 1、前言2、NURBS样条曲线的理解3、UF_CURVE_create_spline参数讲解3.1 UF_CURVE_create_spline的函数说明3.2 UF_CURVE_spline_p_t 的结构体说明3.2.1 start_param和end_param参数3.2.2 num_poles参数3.2.3 order是阶数3.2.4 knots参数3.2.5 poles参数4、完整代码1、前…