HTML5新增的几种选择器详解

最新推荐文章于 2023-10-07 22:30:05 发布
最新推荐文章于 2023-10-07 22:30:05 发布
阅读量1.4k 收藏 10
点赞数 3
分类专栏： 前端 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18404993/article/details/104144647
版权

文章目录

1.基本选择器

1.1 子元素选择器

只能选择某元素的子元素

父元素>子元素

1.2 相邻兄弟元素选择器

选择紧接在另一元素后的元素，而且他们具有相同的父元素

元素+兄弟相邻元素

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<style type="text/css">
		.main > div{
			background-color: red;
		}
		.main > .one + div{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class='main'>
		<div class='one'>1</div>
		<div class='two'>2</div>
		<div class='three'>3</div>
	</div>
</body>
</html>

在这里插入图片描述

1.3 通用兄弟选择器

选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

元素~后面所有兄弟相邻元素

<style type="text/css">
		.main > div{
			background-color: red;
		}
		.main > .one ~ div{
			background-color: blue;
		}
	</style>

在这里插入图片描述

1.4 群组选择器

将具有相同样式的元素分组在一起，每个选择器之间使用逗号隔开

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<style type="text/css">
		h1,div{
			background-color: blue;
		}
	</style>
</head>
<body>
		<div class='one'>1</div>
		<div class='two'>2</div>
		<div class='three'>3</div>
		<span>4</span>
		<h1>5</h1>
</body>
</html>

在这里插入图片描述

2.属性选择器

2.1 选择带有某种属性的元素

div[class]{
			background-color: lightblue;
}

2.2 选择属性等于某个特定值的元素

div[class='one']{
			background-color: lightblue;
}

2.3 选择属性中包含特定单词的元素

注意：是包含某个单词，而不是字符串中包含某个子字符串
例如 div[class~='t'] 选择的是class属性中含有t这个单词的，例如class='t',class='t three'，匹配不到类似于class='three' ,class='two'这类在字符串中包含的。

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<style type="text/css">
		div[class~='t']{
			background-color: lightblue;
		}
	</style>
</head>
<body>
		<div class='one t'>1</div>
		<div class='two'>2</div>
		<div class='three t'>3</div>
		<span>4</span>
		<h1>5</h1>
		<div>6</div>
</body>
</html>

在这里插入图片描述

2.4 选择属性以特定字符串开头的所有元素

div[class^='t']{
			background-color: lightblue;
}

在这里插入图片描述

2.5 选择属性以特定字符串结尾的所有元素

div[class$='t']{
			background-color: lightblue;
}

在这里插入图片描述

2.6 选择属性包含特定字符串的所有元素

div[class*='t']{
			background-color: lightblue;
		}

2.7 选择属性为特定值或以该特定值开头的所有元素

div[class|='t']{
			background-color: lightblue;
}

3.伪类选择器

3.1 动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。
锚点伪类：:link :visited
用户行为伪类: :hover :active :focus

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<style type="text/css">
		div[class*='t']{
			background-color: lightblue;
		}
		.main :hover {
			background-color: pink;

		};
	</style>
</head>
<body>
	<div class='main'>
		<div class='one t'>1</div>
		<div class='two'>2</div>
		<div class='three t'>3</div>
		<span>4</span>
		<h1>5</h1>
		<div>6</div>
	</div>
</body>
</html>

在这里插入图片描述
红色箭头代表鼠标停留位置

3.2 UI元素状态伪类

:enabled :disabled :checked

3.3 CSS3结构类

first-child

element:first-child

选择其父元素的首个子元素的每个element元素

<body>
	<div>0</div>
	<div class='main'>
		<div class='one t'>1</div>
		<div class='two'>2</div>
		<div class='three t'>3</div>
	</div>
</body>

div:first-child{
			background-color: pink;
		}

只要是属于父元素的第一个div，都会匹配
在这里插入图片描述

last-child

div:last-child{
			background-color: pink;
		}

<body>
	<div>0</div>
	<div class='main'>
		<div class='one t'>1</div>
		<div class='two'>2</div>
		<div class='three t'>3</div>
	</div>
	<div>4</div>
</body>

在这里插入图片描述

nth-child(n)

匹配属于其父元素的第n个子元素，不论元素类型
在这里插入图片描述
nth-child(odd) 匹配奇数
nth-child(even)匹配偶数
在这里插入图片描述

nth-last-child(n)

与4.3类似

nth-of-type(n)

匹配属于父元素的特定类型的第n个子元素的每个元素
在这里插入图片描述

nth-last-of-type(n)

与4.5类似

first-of-type

last-of-type

only-child

匹配属于其父元素的唯一子元素的每个元素
意思就是：仅匹配独生子，不能有兄弟元素
在这里插入图片描述

only-of-type

匹配属于其父元素的特定类型的唯一子元素的每个元素
意思就是：仅匹配独生子，但可以有兄弟元素，只要兄弟元素不与他是同一类型即可匹配
在这里插入图片描述

empty

匹配没有子元素（包括文本节点）的每个元素
在这里插入图片描述

3.4 否定选择器

:not(element/selector)选择器匹配非指定元素/选择器的每个元素

父元素:not(子元素/子选择器）

例如：a:not(:last-of-type){...}

4.伪元素

伪元素用于向某些选择器设置特殊效果

4.1 first-line

element::first-line 对element元素中的第一行文本进行格式化
在这里插入图片描述

4.2 first-letter

element::first-letter 对element元素中的第一个字符进行格式化
在这里插入图片描述

4.3 before

element::before 对element元素前面插入新内容，常与content配合使用
在这里插入图片描述

4.4 after

与4.3类似

4.5 selection

用于设置在浏览器中选中文本后的背景色与前景色
在这里插入图片描述

Zijeak
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【微服务】mybatis typehandler使用详解
congge
02-25 5975
mybatis typehandler 使用详解
html5css3笔记1：html5的认识、语义化标签、多媒体标签、新增input标签、属性选择器、结构伪类选择器、伪元素选择器、伪元素之字体图标
小黄呀呀呀的博客
05-17 309
HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 H
HTML5中常见的选择器
xiao1642016021的博客
05-24 2598
功能：选中想要添加样式的元素 注：选择器选择的是离大括号最近的元素，如果是那个元素，就添加，不是就不添加。 1、基础选择器 元素选择器 : 要选择的标记名 类选择器 ：设定的class ID选择器 ：设定的id 通配符 ：* 2、层次选择器 子级选择器 ：父元素>子元素 后代选择器 ：祖先元素 后代元素 兄弟选择器 ： 兄弟元素A+兄弟元素B——特点：AB之间不能有其他元素（相邻） 通用选择器 ： 兄弟元素A~兄弟元素B——特点：选择A之后所有的兄弟级元素B 否定选择器 :not()——小括号里是不
html5新增选择器
aiwu9318的博客
06-22 149
分享点html5的学习笔记，比较基础，突然发现通过写博客来记笔记有很多优点呢，平常记得笔记比较简单，复习起来比较吃力，看自己的博客理解起来还比较轻松，而且只有真正理解了才能表达清楚让别人看懂，还锻炼语言表达能力呢，所以有条件就多写点东西吧 选择器 1 querySelector(如果是一组元素，只能获取到一组中的第一个元素) document.query...
html新增的选择器,HTML5新增的选择器
weixin_39805387的博客
06-10 111
除了传统的document.getElementById,document.getElementsByName,document.getElementsByTagName外，HTML5中新增了2个更好用的选择器，分别是：document.querySelector：返回第一个找到的元素；document.querySelectorAll:返回找到的所有元素。示例：有一个表格，鼠标放上去的时候变色，...
html5新增选择器,CSS3新增属性选择器
weixin_36429702的博客
06-03 184
CSS选择器大致可分为三类：基本选择器、属性选择器和伪类选择器。大家都知道，选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的，自然而然就运用自如了吧，像通配符选择器(＊)、类选择器(.className)、ID选择器(#IDName)、元素选择器(ul、li等)等等，这里就不赘述了。而属性选择器早在CSS2中就被引入了，其主要作用就是通过选择带...
html5 属性选择器
qq_37207090的博客
08-02 640
HTML5-CSS3-新增标签-多媒体、表单属性、input标签、属性选择器、结构伪类选择器、伪元素选择器、2D旋转
解启超
02-19 299
HTML5 一、什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些...
CSS3选择器详解
CSS3选择器是一种用于选择指定HTML元素的模式。它允许开发者通过在样式表中选择元素来应用样式或执行某些操作。 ## 1.2 CSS选择器的作用和重要性 CSS选择器的作用是将样式应用于指定的HTML元素，从而实现对文档的...
基于html5，css3的小米首页静态页面.zip
最新发布
02-13
【HTML5技术详解】 HTML5是下一代HTML标准，它的出现极大地提升了网页的交互性和多媒体表现力，使得开发者能够创建更加丰富、动态的网页内容。HTML5的核心目标是提高用户体验，简化开发过程，并促进跨平台的兼容性...
HTML5选择器
岑志军的个人博客
08-14 581
最近刚开始学习HTML5，记录一下自己学习的笔记，方便以后查阅： 首先选择器的常用分类： 1、标签选择器div{ color: red; }2、类选择器.one{ color: yellow; }3、id选择器，注意id是唯一的标示，不能用于其他标签#main{ font-size: 40px; }4、后代选择器#test1 di
总结html5中常见的选择器
忧郁的蛋的专栏
10-07 1723
例如，`h1 + p`表示选取紧接在 `` 元素后面的第一个 `` 元素。10. 通用兄弟选择器（General Sibling Selector）：使用波浪号（~）分隔的选择器，表示选取某个元素后面的所有兄弟元素。例如，`h1 ~ p`表示选取 `` 元素后面的所有 `` 元素。例如，`div > p`表示选取所有 `` 元素，而这些元素是 `` 元素的直接子元素。例如，`div p`表示选取所有 `` 元素，而这些元素是 `` 元素的后代。
HTML5新增的选择器
Donny的专栏
09-26 137
除了传统的document.getElementById,document.getElementsByName,document.getElementsByTagName外，HTML5中新增了2个更好用的选择器，分别是： document.querySelector：返回第一个找到的元素； document.querySelectorAll:返回找到的所有元素。   示例： 有一个表格...
html5中四种基本选择器,css中的四种基本选择器类型分别是什么
weixin_29373995的博客
06-04 825
css中的四种基本选择器类型分别是标签选择器、ID选择器、类选择器和通用选择器。css中的选择器分为两大类，分别是基本选择器和扩展选择器。CSS的选择器分为两大类：基本选择器和扩展选择器，其中有4种基本选择器。(相关学习视频分享：css视频教程)基本选择器：1、标签选择器：针对一类标签2、ID选择器：针对某一个特定的标签使用3、类选择器：针对你想要的所有标签使用4、通用选择器(通配符)：针对所有的...
html5新增选择器,HTML5-新增特性
weixin_39900830的博客
06-03 61
1、新增的语义化标签：header footer nav section等等2、为什么要使用语义化标签：便于开发者阅读写出更优雅的代码的同时让浏览器的爬虫和机器更好地解析。3、input表单属性：placeholdautofocusautocompleterequiredmultiplepatterninput元素的type(类型)：submit 提交 将form里的内容提交到后端emai...
HTML基础知识（八）——H5新增选择器
weixin_48683052的博客
10-15 1236
一、基础选择器 1、通配符选择器[*] 2、d选择器 3、class选择器（类选择器） 4、标签选择器（元素选择器） 5、属性选择器 [attribute]：用于选取带有指定属性的元素 [attribute=value：用于选取带有指定元素和值的元素] [attribute~=value]：用于选取属性值中包含指定词汇的元素。 [attribute|=value]：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 ...
HTML5新增的3种选择器
liuhongyu666的博客
09-10 1097
引言 在HTML5中，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种方法，通过CSS选择符查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。本文将详细介绍html5新增的3种selector方法以及和ES3中选择器的对比。
CSS3选择器与属性教程：H5+新功能详解
本笔记详细介绍了HTML5和CSS3的一些关键知识点，涵盖了选择器、属性选择器以及特定样式的应用。以下是主要内容的概述： 1. CSS3新增选择器： - `nth-of-type()`：用于选取同一种类型元素中的第几个，如`h3:nth-of-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值