CSS选择器十二种方法

相信大家对元素应该是不陌生的,当我们页面中,我们想要布局,给元素添加样式的时候,我们应该怎么获取到指定元素呢?
优先级:ID 选择器 > 类选择器 > 标签选择器 > 通配符

1.元素选择器

通过标签名可直接选取到元素
例如:div{},p{},ul{}等等

2.类选择器

通过class类选取到元素,可以选取到多个元素,只要给想要添加这种类名的元素添加上class类,就可以不用反复写相关的样式
例如:.className 记住要添加点号(.)

3.id选择器

通过id选取到元素,id是独特的,就跟我们的身份证一样,一人一个,不能重复
例如:#idName
记住以#开头

4.通配符选择器

直接以***基本选择器代码总结:开头,通常用于清除默认样式,比如网页的内外边距
元素选择器~通配符选择器代码总结:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器总结</title><style>/* 第一种,元素选择器 *//* div {color: red;} *//* ................. *//* 第二种,类选择器 *//* .box {color: red;} *//* ................ *//* 第三种,id选择器 *//* #box {color: red;} *//* ............ *//* 第四种,通配符选择器 *//* * {margin: 0;padding: 0;} */</style>
</head>
<body><!-- 第一种元素选择器 --><!-- <div>元素选择器</div> --><!-- .................. --><!-- 第二种类选择器 --><!-- <div class="box">类选择器</div><div class="box">类选择器</div> --><!-- 第三种id选择器 --><!-- <div id="box">id选择器</div> -->
</body>
</html>

5.并集选择器

并集选择器,顾名思义,就是并在一起
例如:.box,.box1
使用逗号隔开,通常用于有相同样式的情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box,.box1 {color: red;}</style>
</head>
<body><div class="box">我是需要并集选择器</div><div class="box1">我也需要并集选择器</div>
</body>
</html>

在这里插入图片描述

6.交集选择器

交集,相交的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div.box {color: red;}</style>
</head>
<body><div class="box">交集选择器</div>
</body>
</html>

在这里插入图片描述

7.后代选择器

后代选择器我们需要用空格隔开,选取到全部的后代
例如:div span{ }

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box span {color: red;}</style>
</head>
<body><div class="box"><span>我是儿子</span><div><span>我是孙子</span><div><span>我是重孙</span></div></div></div>
</body>
</html>

在这里插入图片描述

8.子代选择器

选取到父级元素的子元素,是亲儿子,不包括后代
例如:div>span{ }

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box span {color: red;}</style>
</head>
<body><div class="box"><span>子代选择器</span><span>子代选择器</span><span>子代选择器</span></div>
</body>
</html>

在这里插入图片描述

9.相邻兄弟选择器

使用+号
例如:div+div{ }
选取到的是下一个兄弟

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box+div{color: red;}</style>
</head>
<body><div>我是你上一级兄弟</div><div class="box">我是你哥</div><div>我是你亲兄弟</div>
</body>
</html>

在这里插入图片描述

10.全部兄弟选择器

使用~可以选取到全部兄弟
例如:div~div{ }
不过也是从下一级开始

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box~div{color: red;}</style>
</head>
<body><div>我是你上一级兄弟</div><div class="box">我是你哥</div><div>我是你亲兄弟</div><div>我也是你亲兄弟</div>
</body>
</html>

在这里插入图片描述

11.伪类选择器(常用的3种)

1.:first-child选取到第一个元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box:first-child {color: red;}</style>
</head>
<body><div class="box">1</div><div class="box">2</div><div class="box">3</div>
</body>
</html>

在这里插入图片描述
2.:last-child选取到最后一个元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box span:last-child {color: red;}</style>
</head>
<body><div class="box"><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

在这里插入图片描述
3.:nth-child(n)
选择第n个元素,从1开始
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box span:nth-child(1) {color: red;}.box span:nth-child(2n+2) {color: pink;}</style>
</head>
<body><div class="box"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>
</html>

在这里插入图片描述

十二、属性选择器(介绍4种)

可以通过元素属性选取到属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>input[name=inp]{border: 10px solid #000;}/* 选取到以i开头的元素 */input[name^=i]{border: 10px solid red;}/* 选取以p结尾的元素 */input[name$=p]{border: 10px solid pink;}/* 选取含有n的元素 */input[name*=n]{border: 10px solid hotpink;}</style>
</head>
<body><input type="text" name="inp"><input type="text" name="inp"><input type="text" name="inp">
</body>
</html>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

基于springboot+vue的秒杀商城(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

这是怎么了?继阿里11月故障后,淘宝这个问题20 天了还未修复!

继11月12号&#xff0c;阿里云发生大面积故障故障以来&#xff0c;已经过去了近 20天&#xff0c;但是截止到发文时间&#xff0c;作者发现淘宝还有部分功能存在问题&#xff0c;没法正常使用。 难道真是降本增笑&#xff0c;开猿截流&#xff0c;导致没有相关负责人员了&…

业余爱好-社会工程管理记账报税

税务问题笔记 印花税税费申报及缴纳财务和行为税合并纳税申报增值税及附加税费申报企业所得税季度A类申报残疾人就业保障金申报财务报表个税申报 印花税 印花税是对在经济活动和经济交往中书立、领受具有法律效力的凭证的行为征收的一种税。 税费申报及缴纳 财务和行为税合并…

LeetCode Hot100 75.颜色分类

题目&#xff1a; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 so…

CentOS 7安装Java 8

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 要在CentOS 7上安装Java 8&#xff0c;请按照以下步骤操作&#xff1a; 打开终端并以root身份登录。 更新系统软件包&#xff1a; …

大数据:Hadoop刷题

大数据&#xff1a;Hadoop刷题 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql要…

Day04:每日一题:2661. 找出叠涂元素

2661. 找出叠涂元素 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。 arr 和 mat 都包含范围 [1&#xff0c;m * n] 内的 所有 整数。从下标 0 开始遍历 arr 中的每个下标 i &#xff0c;并将包含整数 arr[i] 的 mat 单元格涂色。请你找出 arr 中在 mat…

【PixPin】媲美QQ/Snipaste截图贴图OCR工具

PixPin PixPin是一款截图工具&#xff0c;它集成了截图、长截图、贴图、标注、OCR识别等众多功能&#xff0c;软件体积小巧&#xff0c;使用简单&#xff0c;是一款非常棒的截图工具。之前使用过Snipaste工具的小伙伴用起来应该是得心应手。 从左往右的功能依次是&#xff1a;…

jetson nano网络配置(有线、无线、USB)

文章目录 网络配置&#xff08;有线、无线&#xff09;1.前言1.1 RJ451.2 无线网卡 2.有线连接2.1 连接方法2.2 检测连接状态 3.无线3.1 网卡安装步骤3.2 连接方法3.3 检测连接状态 4.通过USB 线控制Jetson Nano4.1 连接4.2 查看设备4.3 查看设备IP 网络配置&#xff08;有线、…

ThinkPHP 2.x任意代码执行漏洞

任务一&#xff1a; 复现环境中的代码漏洞 任务二&#xff1a; 尝试利用代码执行漏洞读取服务器web目录下的文件列表。 任务一&#xff1a; 1.搭建环境&#xff1a; 2.在php环境下直接输入{${phpinfo}}测试代码片段 2.写入一句话木马&#xff0c;用antsword连接&#xff0…

【Java8系列07】Java8日期处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nodejs_vue+vscode美容理发店会员管理系统un1dm

按照设计开发一个系统的常用流程来描述系统&#xff0c;可以把系统分成分析阶段&#xff0c;设计阶段&#xff0c;实现阶段&#xff0c;测试阶段。所以在编写系统的说明文档时&#xff0c;根据系统所处的阶段来描述系统的内容。 绪论&#xff1a;这是对选题的背景&#xff0c;意…

停止在 TypeScript 中使用 any 类型

停止在 TypeScript 中使用 any 类型 TypeScript 是 Web 开发人员中最常用的编程语言之一。它具有出色的语言功能&#xff0c;允许我们轻松设计可扩展的应用程序。因此&#xff0c;开发人员倾向于在项目中选择 TypeScript 而不是 JavaScript。 然而&#xff0c;在使用 TypeScr…

Python全栈之基本数据类型详解

文章目录 1.注释2.输出3.变量4.命名规范5.变量的定义方式1.字符串类型2.数字类型3.List列表类型4.tuple 元组类型的定义5.Dict字典类型6.set集合类型7.数据类型转换8.自动类型转换9.强制类型转换关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品…

《opencv实用探索·七》一文看懂图像卷积运算

1、图像卷积使用场景 图像卷积是图像处理中的一种常用的算法&#xff0c;它是一种基本的滤波技术&#xff0c;通过卷积核&#xff08;也称为滤波器&#xff09;对图像进行操作&#xff0c;使用场景如下&#xff1a; 模糊&#xff08;Blur&#xff09;&#xff1a; 使用加权平…

模糊C均值(Fuzzy C-means,FCM)聚类的可运行的python程序代码,复制即可用!!切记需要安装库 scikit-fuzzy

文章目录 前言一、安装库 scikit-fuzzy二、具体程序代码&#xff08;复制可运行&#xff09;三、结果展示总结 前言 模糊C均值&#xff08;Fuzzy C-means&#xff0c;FCM&#xff09;聚类是一种软聚类方法&#xff0c;它允许数据点属于多个聚类&#xff0c;每个数据点对所有聚…

16.Oracle数据库Row_number() over()函数排序使用方法

1.原始数据(部分) SELECT * FROM SCOTT.EMP ; 2.使用Row_number() over() 函数,排序 SELECT EMPNO,ENAME,SAL,DEPTNO,Row_number() over( order by sal) rs FROM SCOTT.EMP ; 根据工资排序并添加序号 3.使用Row_number() over() 函数,分组并排序 SELECT EMPNO,ENAME,SAL,DEPTN…

Python语言学习笔记之七(JOSN应用)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 1、认识Json JSON (JavaScript Obiect Notation)是一种轻量级的数据交换格式&#xff0c;它是ECMAScript的一…

防孤岛装置在光伏发电、燃气发电等新能源并网供电系统的应用

• AM5SE-IS防孤岛保护装置主要适用于35kV、10kV及低压380V光伏发电、燃气发电等新能源并网供电系统。 • 当发生孤岛现象时&#xff0c;可以快速切除并网点&#xff0c;使本站与电网侧快速脱离&#xff0c;保证整个电站和相关维护人员的生命安全**。 保护功能** ● 三段式过流…

Linux git

1.Git 初识 不知道你⼯作或学习时&#xff0c;有没有遇到这样的情况&#xff1a;我们在编写各种⽂档时&#xff0c;为了防止文档丢失&#xff0c;更改失误&#xff0c;失误后能恢复到原来的版本&#xff0c;不得不复制出⼀个副本&#xff0c;⽐如&#xff1a; “报告-v1”? …