CSS常用十大选择器（理论+代码实操）

news2024/12/23 10:27:39

HTML代码实例

注意：拷贝后本地运行注意head标签中的link标签的href属性是否正确

我的目录结构：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="../css/selector.css">
	</head>
	<body>
		<!--元素选择器-->
		<a href="https://www.baidu.com/">这是一个a标签</a>
		
		<!--id选择器-->
		<div id="aa">aa-div</div>
		
		<!--类选择器-->
		<div class="AA">AA-div1</div>
		<div class="AA">AA-div2</div>
		
		<!--属性选择器-->
		<br><br>
		<em lang="en" class="em1">english</em><br><br>
		<em lang="zh" class="em1">中文</em> <br><br>
		<em lang="fr">french</em><br><br>
		<em lang="ru">ruissa</em><br><br>
		
		<!--包含选择器-->
		<div class="BB0">
			<p>1111</p>
			<div>
				<p class="BB2">BB-div内部的p</p>
			</div>
		
		</div>
		<p class="BB">BB-div外部的p</p>
		
		
		<!--子选择器-->
		<table class="TB">
			<thead>
				<tr>
					<th>1</th>
					<th>2</th>
					<th id="th">3</th>
					<th>4</th>
					<th>5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>1-1</th>
					<th>1-2</th>
				</tr>
				<tr>
					<th>2-1</th>
					<th>2-2</th>
				</tr>
			</tbody>
		</table>
		
		
		<!--兄弟选择器-->
		<ol>
			<li>早睡早起</li>
			<li class="BRO">多吃蔬菜</li>
			<li>心情舒畅</li>
			<li>多多运动</li>
		</ol>
		
		<!--伪类选择器-->
		
		<a class="weiLei" href="https://www.tencent.com/zh-cn/index.html">腾讯官网</a>
		
		<!--伪元素选择器-->
		<div>
			伪元素选择器------所有div元素的第一个汉字放大，加粗，红色
		</div>
	</body>
</html>

元素选择器

直接用html标签命名，对整个html文档的全部此标签生效

/*元素选择器*/
a {/*对所有的a标签生效*/
    font-size: 22px;
    color: brown;
}

在这里插入图片描述

id选择器

#+id名称，根据标签的id属性进行选择，id由用户自定义，建议保证唯一性

所有标签都具有id属性

在这里插入图片描述

/*id选择器*/
#aa {
    background: aquamarine;
}

在这里插入图片描述
首字母字号变大+红色是伪元素选择器的效果，我们稍后就讲

class选择器

.+class名称使用，根绝标签的class属性选择

所有的标签都有class属性

在这里插入图片描述

.AA {
    width: 500px;
    height: 200px;
    background: antiquewhite;
}

在这里插入图片描述

属性选择器

标签名[属性名]，可以根据属性值进行多种类型的匹配
在这里插入图片描述

/*1. 是否存在*/
em[lang] {
    color: red;
}

/*2. 属性=“”*/
em[lang="zh"] {
    font-size: 100px;
}
/* class属性的=可以简写*/
em.em1 {
    font-weight: bolder;
}

/*3. 属性以“”开头*/
em[lang^="e"] {
    background: greenyellow;
}

/*4. 属性包含“”*/
em[lang*=r] {
    font-size: 50px;
    font-weight: lighter;
}

/*5. 属性以“”结尾*/
em[lang$="u"] {
    color: cornflowerblue;

}

属性是否存在

所有em标签中lang属性不为空的，字体都会变成红色

在这里插入图片描述

russia被其他效果覆盖了，其实原本也是红色

属性 = xxx

em标签中，lang标签 = zh的标签也是有的，“中文”变成了100像素大小

如果选中的属性是class属性，em[class = xxx]可以简写为em.xxx

属性以xxx开始

en属性值以e开始，所以背景变成了黄绿色

属性包含xxx

fr属性和ru属性都包含r，所以他们两个都会变成50px字号+字体更细

属性以xxx结尾

ru属性值以u结尾，所以字体颜色会变成天蓝色，覆盖掉之前的红色

包含选择器

不严格的父子关系，只要包括即可

中间的空格不写，很容易与属性选择器中的属性 = xxx的class属性简写的情况搞混，千万要注意是否有空格
在这里插入图片描述

/*包含选择器，不严格的父子关系*/
.BB0 p {
    width: 150px;
    height: 100px;
    background: aqua;

}

在这里插入图片描述
我们可以看到class为BB0的标签内部的所有p标签都生效了，也就是说对儿子和孙子都生效，都变成了aqua颜色的背景，同时宽高也被调整

父子选择器

严格的父子关系，孙子不会生效

在这里插入图片描述

/*子选择器,严格的父子关系*/
/*TB只是装饰，父子选择器在下面*/
.TB {
    border: 5px solid blue;
}

/*父子关系不严格，不生效*/
.TB > tr > th {
    background: black;
}


/*父子关系严格，生效，所有的孩子都会生效*/
.TB > thead > tr > th {
    border: 2px solid black;
}

在这里插入图片描述
不严格的父子关系没生效（表头的背景为黑色没生效）

严格的父子关系生效了（黑色的边框线）

兄弟选择器

分为一般兄弟选择器和紧邻兄弟选择器

一般兄弟选择器

用~连接兄弟，从基准选择器开始，向下识别它的所有兄弟元素(不包括基准选择器)

紧邻兄弟选择器

用+连接兄弟选择器，从基准选择器开始，向下识别它的第一个兄弟元素（不包括基准选择器）

在这里插入图片描述

/*兄弟选择器*/
/*基准选择器~基准选择器的兄弟选择器*/


/*一般兄弟选择器*/
/*从基准选择器开始，向下识别它的所有对应的兄弟元素*/
.TB > thead > tr > #th ~ th {
    background: green;
}

/*紧邻兄弟选择器*/
/*从基准选择器开始，向下识别它的紧邻的一个兄弟元素*/
.BRO + li {
    font-style: italic;
    color: orangered;

}

在这里插入图片描述

在这里插入图片描述

我们可以看到表头的id为th的th元素的后面的所有兄弟th元素都匹配到了，背景颜色变成了green（一般兄弟选择器）

我们还可以看到class属性为BRO的li元素的下一个兄弟li元素被匹配，字体变成了斜体，颜色为橘红色（紧邻兄弟选择器）

组合选择器

其实就是各种选择器的排列组合，不同的选择器用逗号隔开

/*组合选择器*/
/*不同的选择器，用逗号隔开，表示设置相同的属性*/

.BB0 p, .TB > thead > tr > th {/*包含选择器，父子选择器*/
    width: 200px;
    height: 300px;
    background: blueviolet;
}

在这里插入图片描述
对应部分的背景颜色都变成了紫色

伪类选择器&&伪元素选择器

伪，假装的意思；
好像有这个类，但实际上没有
好像有这个元素，但实际没有

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于html文档之外的抽象，所以叫伪类。

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于html文档之中，所以叫伪元素。

实际使用有很多伪选择器，比如anchor伪类，:before，:after，:focus等，详见

CSS 伪类 | 菜鸟教程 (runoob.com)

CSS 伪元素 | 菜鸟教程 (runoob.com)

demo

在这里插入图片描述

/*伪类选择器*/

/*anchor伪类*/
.weiLei:hover {
    color: gray;
}

/*first-child 伪类*/


/*:focus伪类。*/


/*伪元素选择器*/

div:first-letter {
    font-size: 36px;
    color: red;
    font-weight: bolder;
}

在这里插入图片描述
div元素的第一个汉字确实都更大
在这里插入图片描述

鼠标悬停时，腾讯官网字体颜色变成了灰色

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

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

相关文章

使用新一代一站式 AI Bot 开发平台扣子coze，搭建我的第一个AI Bot(前端魔法师) ,

使用新一代一站式 AI Bot 开发平台扣子coze，搭建我的第一个AI Bot(前端魔法师) ,

目录 1.概述​ 2.功能与优势 3.使用扣子 4.人设与回复逻辑 5.添加插件 6.预览与调试 7.发布bot Store 8.环境大家体验&#xff08;给大家内置了比较屌的插件&#xff09; 9.推荐阅读&#xff1a; 1.概述​ 扣子是新一代一站式 AI Bot 开发平台。无论你是否有编程基础…
阅读更多...
代码学习记录42---动态规划

代码学习记录42---动态规划

随想录日记part42 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.04.14 主要内容&#xff1a;今天开始要学习动态规划的相关知识了&#xff0c;今天的内容主要涉及&#xff1a;最长递增子序列 &#xff1b;最长连续递增序列 &#xff1b;最长重复子数组 ;最长公…
阅读更多...
陇剑杯 ios 流量分析

陇剑杯 ios 流量分析

陇剑杯 ios 流量分析 ios 一位ios的安全研究员在家中使用手机联网被黑&#xff0c;不仅被窃密还丢失比特币若干&#xff0c;根据流量分析完成ios1-8 ios 1 ios-1&#xff1a;黑客所控制的C&C服务器IP是_____________。 什么是C&C服务器? C&C&#xff08;Com…
阅读更多...
UBuntu18.04通过ODBC连接MySQL远程数据库

UBuntu18.04通过ODBC连接MySQL远程数据库

今天在做一个Qt视频播放器的小项目然后想要在ubuntu18.04运行这个项目&#xff0c;需要在Qt中连接远程的MySQL数据库&#xff0c;所以用到了ODBC。我在连接时遇到了一些问题&#xff0c;加之网上的教程各说纷纭&#xff0c;所以我花了很多时间去解决&#xff0c;所以决定做做笔…
阅读更多...
架构师系列-搜索引擎ElasticSearch（五）- 索引设计

架构师系列-搜索引擎ElasticSearch（五）- 索引设计

索引创建后&#xff0c;要非常谨慎&#xff0c;创建不好后面会出现各种问题。 索引设计的重要性 索引创建后&#xff0c;索引分片只能通过_split和_shrink 接口对其进行成倍的增加和缩减。 ES的数据是通过_routing分配到各个分片上的&#xff0c;所以本质上不推荐区改变索引的…
阅读更多...
链表-双指针-虚拟节点-力扣

链表-双指针-虚拟节点-力扣

链表--双指针--虚拟节点 力扣 142 环形链表求循环起点 重点力扣 21 合并两个有序链表力扣 86 分割链表力扣23 合并K个有序链表 -- 优先队列&#xff08;二叉堆 小顶堆&#xff09;重点力扣19 找倒数第N个元素 快慢指针 一次遍历 重点力扣876 快慢指针找中间节点力扣 160 相交链…
阅读更多...
vue简单使用三（class样式绑定）

vue简单使用三（class样式绑定）

目录 对象的形式绑定&#xff1a; 数组的形式绑定&#xff1a; 内联样式Style 对象的形式绑定&#xff1a; 可以看到class中有两个值 数组的形式绑定&#xff1a; 可以看到也有两个值 内联样式Style style样式设置成功 完整代码&#xff1a; <!DOCTYPE html> <html…
阅读更多...
快速列表quicklist

快速列表quicklist

目录 为什么使用快速列表quicklist 对比双向链表 对比压缩列表ziplist quicklist结构 节点结构quicklistNode quicklist 管理ziplist信息的结构quicklistEntry 迭代器结构quicklistIter quicklist的API 1.创建快速列表 2.创建快速列表节点 3.头插quicklistPushHead …
阅读更多...
qemu源码解析一

qemu源码解析一

基于qemu9.0.0 简介 QEMU是一个开源的虚拟化软件&#xff0c;它能够模拟各种硬件设备&#xff0c;支持多种虚拟化技术&#xff0c;如TCG、Xen、KVM等 TCG 是 QEMU 中的一个组件&#xff0c;它可以将高级语言编写的代码&#xff08;例如 C 代码&#xff09;转换为可在虚拟机中…
阅读更多...
关于部署ELK和EFLK的相关知识

关于部署ELK和EFLK的相关知识

文章目录 一、ELK日志分析系统1、ELK简介1.2 ElasticSearch1.3 Logstash1.4 Kibana&#xff08;展示数据可视化界面&#xff09;1.5 Filebeat 2、使用ELK的原因3、完整日志系统的基本特征4、ELK的工作原理 二、部署ELK日志分析系统1、服务器配置2、关闭防火墙3、ELK ElasticSea…
阅读更多...
Niobe开发板OpenHarmony内核编程开发——定时器

Niobe开发板OpenHarmony内核编程开发——定时器

本示例将演示如何在Niobe Wifi IoT开发板上使用cmsis 2.0 接口进行定时器开发 Timer API分析 osTimerNew() /// Create and Initialize a timer./// \param[in] func function pointer to callback function./// \param[in] type \ref osTimerOnce …
阅读更多...
【菜狗学前端】原生Ajax笔记（包含原生ajax的get/post传参方式、返回数据等）

【菜狗学前端】原生Ajax笔记（包含原生ajax的get/post传参方式、返回数据等）

这回图片少&#xff0c;给手动替换了~祝看得愉快&#xff0c;学的顺畅&#xff01;哈哈 一 原生ajax经典四步 (一) 原生ajax经典四步 第一步&#xff1a;创建网络请求的AJAX对象&#xff08;使用XMLHttpRequest&#xff09; JavaScript let xhr new XMLHttpRequest() 第二…
阅读更多...
网络编程【InetAddress ， TCP 、UDP 、HTTP 案例】

网络编程【InetAddress ， TCP 、UDP 、HTTP 案例】

day38上 网络编程 InetAddress 理解&#xff1a;表示主机类 一个域名 对应 多个IP地址 public static void main(String[] args) throws UnknownHostException {//获取本机的IP地址 // InetAddress localHost InetAddress.getLocalHost(); // System.out.println(localHos…
阅读更多...
【GPT-4最新研究】GPT-4与科学探索：揭秘语言模型在科学领域的无限可能

【GPT-4最新研究】GPT-4与科学探索：揭秘语言模型在科学领域的无限可能

各位朋友们&#xff0c;你们知道吗&#xff1f;自然语言处理领域最近取得了巨大的突破&#xff01;大型语言模型&#xff08;LLM&#xff09;的出现&#xff0c;简直就像打开了新世界的大门。它们不仅在语言理解、生成和翻译方面表现出色&#xff0c;还能涉足许多其他领域&…
阅读更多...
如何在Windows安装LocalSend并结合内网穿透实现公网跨平台远程文件互传

如何在Windows安装LocalSend并结合内网穿透实现公网跨平台远程文件互传

文章目录 1. 在Windows上安装LocalSend2. 安装Cpolar内网穿透3. 公网访问LocalSend4. 固定LocalSend公网地址 本篇文章介绍在Windows中部署开源免费文件传输工具——LocalSend&#xff0c;并且结合cpolar内网穿透实现公网远程下载传输文件。 localsend是一款基于局域网的文件传…
阅读更多...
计算机视觉实验五——图像分割

计算机视觉实验五——图像分割

计算机视觉实验五——图像分割 一、实验目标二、实验内容1.了解图割操作&#xff0c;实现用户交互式分割&#xff0c;通过在一幅图像上为前景和背景提供一些标记或利用边界框选择一个包含前景的区域&#xff0c;实现分割①图片准备②代码③运行结果④代码说明 2.采用聚类法实现…
阅读更多...
【Orange pi 系列】Notebook1 初探开发板

【Orange pi 系列】Notebook1 初探开发板

记录学习香橙派开发板的心路历程 Notebook1 初探开发板 Orange pi 5 plus 开发板Orange pi AI pro 开发板烧录系统 Orange pi 5 plus 开发板 Orange pi AI pro 开发板 烧录系统 分别给5plus和AI pro安装了Orange OS 和OpenEuler OS
阅读更多...
【C语言】每日一题，快速提升（1）！

【C语言】每日一题，快速提升（1）！

调整数组使奇数全部都位于偶数前面 题目&#xff1a; 输入一个整数数组&#xff0c;实现一个函数 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分 所有偶数位于数组的后半部分 解题思路&#xff1a; 给定两个下标left和right&#xff0c;left放在数组的起始…
阅读更多...
计算机视觉——手机目标检测数据集

计算机视觉——手机目标检测数据集

这是一个手机目标检测的数据集&#xff0c;数据集的标注工具是labelimg,数据格式是voc格式&#xff0c;要训练yolo模型的话&#xff0c;可以使用脚本改成txt格式&#xff0c;数据集标注了手机&#xff0c;标签名&#xff1a;telephone,数据集总共有1960张&#xff0c;有一部分是…
阅读更多...
使用spring-ai快速对接ChatGpt

使用spring-ai快速对接ChatGpt

什么是spring-ai Spring AI 是一个与 Spring 生态系统紧密集成的项目&#xff0c;旨在简化在基于 Spring 的应用程序中使用人工智能&#xff08;AI&#xff09;技术的过程。 简化集成&#xff1a;Spring AI 为开发者提供了方便的工具和接口&#xff0c;使得在 Spring 应用中集…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023