CSS选择器整理学习（上）

news2024/11/27 10:28:29

        在前端项目开发中，有时候需要对特殊的元素进行特殊的处理，但有时候元素的位置不确定、层级不确定、数量不确定等问题，导致我们没办法进行元素的选择，这个时候我们就需要用到元素选择器了。

一、CSS选择器

1、.class

选择器例子例子描述
.class.intro选择 class="intro"的所有元素

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="intro">元素1</div>
    <div class="intro">元素2</div>
</body>
</html>
<style>
.intro{
    color: red;
}
</style>

页面展示：

2、.class1.class2

选择器例子例子描述
.class1.class2..name1.name2选择 class 属性中同时有 name1 和 name2 的所有元素。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="intro">元素1</div>
    <div class="intro">元素2</div>
    <div class="name1 name2">元素3</div>
</body>
</html>
<style>
.intro{
    color: red;
}
.name1.name2{
    color: aqua;
}
</style>

页面展示：

3、.class1 .class2

选择器例子例子描述
.class1 .class2..name1 .name2选择作为类名 name1 元素后代的所有类名 name2 元素。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="name1">
        <div class="name2">元素1</div>
        <div class="name2">元素2</div>
    </div>
</body>
</html>
<style>
.name1 .name2{
    background: red;
}
</style>

页面展示：

4、#id

选择器例子例子描述
#id#firstname选择 id="firstname" 的元素。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="firstname">
        
    </div>
</body>
</html>
<style>
#firstname{
    width: 100%;
    height: 100px;
    background: black;
}
</style>

页面展示：

5、*

选择器例子例子描述
**选择所有元素。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="firstname">
        
    </div>
</body>
</html>
<style>
*{
    background: blue;
}
</style>

页面展示：

 6、element

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>元素1</p>
    <p>元素2</p>
</body>
</html>
<style>
p{
    color: blue;
}
</style>

页面展示：

 7、element.class

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>元素1</p>
    <p class="intro">元素2</p>
</body>
</html>
<style>
p{
    color: blue;
}
p.intro{
    color: red;
}
</style>

页面展示：

 8、element,element

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>元素1</p>
    <p>元素2</p>
    <div>元素3</div>
</body>
</html>
<style>
div,p{
    color: aqua;
}
</style>

页面展示：

9、element element

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>元素1</p>
        <p>元素2</p>
    </div>
</body>
</html>
<style>
    div p {
        color: aqua;
    }
</style>

页面展示：

 10、element>element

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>元素1</p>
        <p>元素2</p>
    </div>
</body>
</html>
<style>
    div>p {
        color: aqua;
    }
</style>

页面展示：

11、 element+element

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>元素1</p>
        <p>元素2</p>
    </div>
    <p>元素3</p>
    <p>元素4</p>
</body>
</html>
<style>
    div+p {
        color: aqua;
    }
</style>

页面展示：

12、element1~element2

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>元素1</p>
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ul>
   <ul>11</ul>
</body>
</html>
<style>
    p~ul{
        background: red;
    }
</style>

页面展示

13、 [attribute]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div target="_blank">元素1</div>
    <div target="_top">元素2</div>
    <div></div>
</body>
</html>
<style>
   [target]{
    color: aqua;
   }
</style>

页面展示：

 14、[attribute=value]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div target="_blank">元素1</div>
    <div target="_top">元素2</div>
    <div></div>
</body>
</html>
<style>
   [target=_blank]{
    color: aqua;
   }
</style>

页面展示：

 15、[attribute~=value]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div title="元素 1 ">元素1</div>
    <div title="元素2 ">元素2</div>
    <div title="元素3 ">元素3</div>
</body>
</html>
<style>
  [title~=元素]{
    color: red;
  }
</style>

页面展示：

16、[attribute|=value]

代码：

<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]
{
background:yellow;
}
</style>
</head>

<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="zh">nihao!</p>

<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。</p>

</body>
</html>

页面展示：

17、 [attribute^=value]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="first_test">第一个 div 元素。</div>
    <div class="second">第二个 div 元素。</div>
    <div class="test">第三个 div 元素。</div>
    <p class="test">这是段落中的文本。</p>
</body>
</html>
<style>
div[class^=test]{
    color: aqua;
}
</style>

页面展示：

 18、[attribute$=value]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="first_test">第一个 div 元素。</div>
    <div class="second">第二个 div 元素。</div>
    <div class="test">第三个 div 元素。</div>
    <p class="test">这是段落中的文本。</p>
</body>
</html>
<style>
div[class$=test]{
    color: aqua;
}
</style>

页面展示：

19、 [attribute*=value]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="first_test">第一个 div 元素。</div>
    <div class="second">第二个 div 元素。</div>
    <div class="test">第三个 div 元素。</div>
    <p class="test">这是段落中的文本。</p>
</body>
</html>
<style>
div[class*=e]{
    color: aqua;
}
</style>

页面展示：

 

 

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

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

相关文章

图像处理解决流程--外观检测

图像处理解决流程--外观检测

一、图像外观检测和面积计算 1、获取标准图像&#xff0c;提取要测定的区域&#xff08;截取成多个ROI&#xff09; 2、将目标图像的位置进行平移和旋转&#xff08;将目标图像和标准图像进行重叠&#xff09; 3、根据标准图像的区域进行以此计算目标图像的信息 4、判断统计 二…
阅读更多...
Ajax基础

Ajax基础

Ajax 是 Asynchronous JavaScript and XML&#xff08;异步 JavaScript 和 XML&#xff09;的简写 Ajax 中的异步&#xff1a;可以异步地向服务器发送请求&#xff0c;在等待响应的过程中&#xff0c;不会阻塞当前页面&#xff0c;浏览器可以做自己的事情。直到成功获取响应后…
阅读更多...
Maven高级进阶

Maven高级进阶

文章目录1&#xff0c;分模块开发1.1 分模块开发设计1.2 分模块开发实现1.2.1 环境准备1.2.2 抽取domain层步骤1:创建新模块步骤2:项目中创建domain包步骤3:删除原项目中的domain包步骤4:建立依赖关系步骤5:编译maven_02_ssm项目步骤6:将项目安装本地仓库1.2.3 抽取Dao层步骤1:…
阅读更多...
iOS vue devtools工具的手把手安装，及Vue.js not detected的解决

iOS vue devtools工具的手把手安装，及Vue.js not detected的解决

使用vue插件Vue.js devtools 一.通过谷歌商店直接下载&#xff08;要翻墙&#xff09; 二.不翻墙的方法&#xff1a; 1.官网下载 git地址&#xff1a;https://github.com/vuejs/devtools git clone https://github.com/vuejs/devtools2.完成后命令行里切到该目录下&#x…
阅读更多...
AppScan绕过登录验证码深入扫描

AppScan绕过登录验证码深入扫描

系列文章 AppScan介绍和安装 AppScan 扫描web应用程序 AppScan被动手动探索扫描 第四节-绕过登录验证码深入扫描 我们工作中最长碰到的工作场景是网站采用https协议&#xff0c;这时我们要用appScan进行扫描时&#xff0c;就需要先安装证书 1.证书安装 1.新建一个文件&…
阅读更多...
渗透测试— —扫描与爆破账号

渗透测试— —扫描与爆破账号

渗透测试— —扫描与爆破靶机账号 1 扫描与爆破账号流程 注意&#xff1a;仅用于教学与实验&#xff0c;不能用于攻击&#xff0c;否则后果自负 扫描&#xff1a;主机探测与端口扫描。&#xff08;主机探测&#xff1a;目标主机是存活&#xff0c;端口扫描&#xff1a;在线主…
阅读更多...
总结 62 种在深度学习中的数据增强方式

总结 62 种在深度学习中的数据增强方式

数据增强 数据增强通常是依赖从现有数据生成新的数据样本来人为地增加数据量的过程 这包括对数据进行不同方向的扰动处理 或使用深度学习模型在原始数据的潜在空间(latent space)中生成新数据点从而人为的扩充新的数据集 这里我们需要区分两个概念&#xff0c;即增强数据和…
阅读更多...
SpringBoot的filter过滤器

SpringBoot的filter过滤器

SpringBoot的filter过滤器 目录SpringBoot的filter过滤器一、过滤器的作用和概述1.1 简述1.2 使用场景二、自定义过滤的两种方式2.1 第一种方式2.1.1 启动类增加注解ServletComponentScan2.1.2 定义一个filter类2.1.3. 测试2.2 第二种方式2.2.1 自定义fitler类2.2.4 在启动类中…
阅读更多...
《Linux Shell脚本攻略》学习笔记-第五章

《Linux Shell脚本攻略》学习笔记-第五章

5.1 简介 借助HTTP协议所提供的功能以及命令行实用工具&#xff0c;我们可以用脚本满足大量的web自动化需求。 5.2 web页面下载 wget是一个用于文件下载的命令行工具&#xff0c;选项繁多且用法灵活。 下载单个文件或web页面 指定从多个URL处进行下载 我们可以通过选项-O指定输…
阅读更多...
centos上用nginx搭建简单的点播服务器

centos上用nginx搭建简单的点播服务器

查看centos系统信息&#xff1a;cat /etc/centos-release配置服务器DNSecho "nameserver 114.114.114.114" >> /etc/resolv.conf 安装网络工具yum install ntpdate wget net-tools -y同步服务器时间ntpdate ntp.aliyun.com安装编译工具及依赖库yum install -y …
阅读更多...
【原生Button和antd的Button】

【原生Button和antd的Button】

1. 原生Button 1. form 与按钮所关联的form元素。此属性的值必须是同一文档中form的id。如果未设置此属性&#xff0c;则 < Button>与其祖先< form>元素相关联 此属性允许将< Button>元素关联到文档中的任意位置< form>&#xff0c;而不仅仅是< …
阅读更多...
Jenkins配置邮箱接收构建通知

Jenkins配置邮箱接收构建通知

Jenkins配置邮箱接收构建通知1、开启163邮箱的POP3/SMTP服务2、配置Jenkins Location3、配置Extended E-mail Notification4、配置邮件通知选项5、任务中配置6、任务构建测试7、怎么同时给多人发邮件1、开启163邮箱的POP3/SMTP服务 这里我们用163邮箱当作发件方&#xff0c;qq邮…
阅读更多...
aloam学习笔记(四)

aloam学习笔记(四)

对于laserMapping.cpp源码的学习&#xff0c;这部分的主要功能是接受前端传来的数据&#xff0c;构建地图。 一、main函数部分 ros::init(argc, argv, "laserMapping");ros::NodeHandle nh;float lineRes 0;float planeRes 0;nh.param<float>("mapping…
阅读更多...
前端食堂技术周刊第 67 期：2022 State of JS、ESLint 2022、pnpm 2022、大淘宝 Web 端技术概览

前端食堂技术周刊第 67 期：2022 State of JS、ESLint 2022、pnpm 2022、大淘宝 Web 端技术概览

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;东北大饭包 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 本期摘要 2022 State of JS 结果出炉ESLint 2022 年终总结pnpm 2022 年终总结大淘…
阅读更多...
Win10注册表损坏进不了系统怎么U盘重装系统？

Win10注册表损坏进不了系统怎么U盘重装系统？

Win10注册表损坏进不了系统怎么U盘重装系统&#xff1f;有用户电脑提示注册表损坏&#xff0c;自己进行了系统的重新启动之后&#xff0c;遇到了电脑无法正常启动进行系统桌面的情况。那么遇到这样的情况&#xff0c;我们怎么去进行U盘重装系统呢&#xff1f;一起来看看具体的操…
阅读更多...
ZIP压缩文件如何加密？忘记密码怎么办？

ZIP压缩文件如何加密？忘记密码怎么办？

ZIP是常用的压缩文件格式之一&#xff0c;除了方便传输、节省空间&#xff0c;还能通过设置密码来保护文件。 设置ZIP文件的密码保护需要用到压缩软件&#xff0c;下面先说说最常用的WinRAR是如何设置ZIP文件的密码。 方法一&#xff1a; 我们可以压缩文件的同时设置密码&am…
阅读更多...
core-js常见于qiankun中的多份polyfill冲突问题

core-js常见于qiankun中的多份polyfill冲突问题

问题 开门见山&#xff0c;你可能会在 qiankun 等微前端体系中&#xff0c;有多个子应用时&#xff0c;发生这样的加载崩溃问题&#xff1a; Cannot redefine property: DEG_PER_RAD Cannot redefine property: RAD_PER_DEG 实际上 DEG_PER_RAD 和 RAD_PER_DEG 都是 Math 上的…
阅读更多...
Android面经_111道安卓基础问题（四大组件Activity、Service篇）

Android面经_111道安卓基础问题（四大组件Activity、Service篇）

111道Android面试基础题目&#xff0c;巩固基础作用。 Android基础问题——四大组件之Activity、Service1、Activity1.1、请介绍activity的生命周期1.1.1、生命周期回调之onCreate()1.1.2、生命周期回调之onStart()1.1.3、生命周期回调之onResume()1.1.4、生命周期回调之onPaus…
阅读更多...
【java】java多线程及线程池面试题

【java】java多线程及线程池面试题

目录前言线程是什么&#xff1f;多线程是什么&#xff1f;多线程的作用和好处以及缺点守护线程和用户线程并发和并行的区别一.线程的状态和常用方法1.线程各种状态转化图2.线程相关常用方法有① wait()② sleep(long timeout)③ join()④ yield()⑤ notify()和notifyAll()3.wai…
阅读更多...
全流量分析为企业提升SAP用户体验

全流量分析为企业提升SAP用户体验

前言 某汽车总部已部署NetInside流量分析系统&#xff0c;使用流量分析系统提供实时和历史原始流量&#xff0c;重点针对SAP系统性能进行分析&#xff0c;以供安全取证、应用事务分析、网络质量监测以及深层网络分析。 本次分析报告包含&#xff1a;SAP系统性能分析。 分析对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023