当前位置： 首页 > news >正文

CSS||选择器

news 2026/4/2 18:46:12

目录

作用

分类

基础选择器

标签选择器

​编辑类选择器

id选择器 

通配符选择器

作用

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。  简单来说，就是选择标签用的。

 选择器的使用一共分为两步：

1.找到需要定义的标签

2.设置这些标签的样式

分类
基础选择器

由单个选择器组成

标签选择器

用HTML标签名称作为选择器，按照标签进行分类，为页面中某一类标签指定统一的CSS样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>p{color:aqua;font-size: larger;font-weight: bold;text-align: center;background-color: #000;font-family: Arial, Helvetica, sans-serif;}</style>
</head>
<body><p>HELLO WORLD</p>
</body>
</html>

 运行结果：

类选择器

如果想要差异化选择不同标签，单独选择一个或者几个标签，可以使用类选择器

结构需要用class属性来调用class类的意思

样式点定义 结构类（class）调用 一个或多个 开发最常用

  • 类的名字由我们自己定义（不能用已知标签名字）
  • 多个单词用短横线来分割
  • 不要出现纯数字，中文等命名，尽量使用英文字母来表示
  • 命名要有意义
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>.mycss{color:aqua;font-size: larger;font-weight: bold;text-align: center;background-color: #000;font-family: Arial, Helvetica, sans-serif;}</style>
</head>
<body><p class="mycss">HELLO WORLD</p><p>young man</p>
</body>
</html>

运行结果： 

 类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>.mycss {background-color:aqua;}.mycss2 {width: 800px;height: 400px;}</style>
</head>
<body><div class="mycss mycss2">HELLO WORLD</div>
</body>
</html>

 在标签class属性中写多个类名

在多个类名中间必须用空格分开

id选择器 

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

注：只能调用一次

#id名{属性1：属性值1;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>#purple {color:purple;}</style>
</head>
<body><div id="purple" class="mycss mycss2">HELLO WORLD</div>
</body>
</html>
通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素

相关文章：

CSS||选择器

目录 作用 分类 基础选择器 标签选择器 ​编辑类选择器 id选择器 通配符选择器 作用 选择器&#xff08;选择符&#xff09;就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说&#xff0c;就是选择标签用的。 选择器的使用一共分为两步&#xff1a; 1.…...

编程日记 2024/1/19 17:56:54

几种常见的算法

一、冒泡排序法 冒泡排序法 原始数据&#xff1a;3 2 7 6 8 第1次循环&#xff1a;&#xff08;最大的跑到最右边&#xff09; 2 3 7 6 8&#xff08;3和2比较&#xff0c;2<3 所以2和3交换位置&#xff09; 2 3 7 6 8&#xff08;3和7比较&#xff0c;3<7 所以不需要交…...

编程日记 2024/1/19 17:55:53

原生的cURL函数而不是 tp6框架的Http类，curl_init()、curl_setopt()和curl_exec()等cURL函数

GET请求示例&#xff1a; // 初始化 cURL $ch curl_init(); // 设置 cURL 选项 curl_setopt($ch, CURLOPT_URL, https://example.com/api/resource); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // 执行 cURL 并获取返回结果 $response curl_exec($ch); // 关闭 cURL…...

编程日记 2024/1/19 17:54:52

Win10下在Qt项目中配置SQlite3环境

资源下载 官网资源&#xff1a;SQLite Download Page 1、sqlite.h sqlite-amalgamation-3450000.zip (2.60 MiB) 2、sqlite3.def&#xff0c;sqlite3.dll sqlite-dll-win-x64-3450000.zip (1.25 MiB) 3、 win10下安装sqlite3所需要文件 sqlite-tools-win-x64-3450000.zipht…...

编程日记 2024/1/19 17:53:51

Sentinel 轨道数据及下载

Sentinel卫星轨道文件在处理Sentinel卫星数据时发挥着关键作用。这些轨道文件包含了有关卫星在轨道上的运动、位置、姿态等信息&#xff0c;对于地理校正、成像几何校正以及多时相分析等方面具有重要作用。以下是Sentinel卫星轨道文件的主要作用&#xff1a; 地理校正&#xff…...

编程日记 2024/1/19 17:50:47

MD5 加密

任务&#xff1a; 接到一个任务&#xff0c;调用对方的接口&#xff0c;内容和密码&#xff0c;需要使用md5进行加密&#xff0c;再发送请求。 参数说明&#xff1a; 参数名称 说明 备注 timespan 时间戳 格式为yyyyMMddHHmmss pwd 密码 此处用原始密码时间戳做MD5加…...

编程日记 2024/1/19 17:48:45

在 Excel 中将列数据用单引号括起来并添加分隔符的解决方案

在 Excel 中&#xff0c;有时候我们需要将某一列的所有值连接在一起&#xff0c;并且每个值用单引号括起来&#xff0c;同时在每个值之间添加逗号和空格。这样的需求在数据处理和导出时比较常见。本文将介绍一种使用 Excel 函数解决这个问题的方法。 解决方案&#xff1a; 方…...

编程日记 2024/1/19 17:47:44

技术硬实力，阿里巴巴为什么要开源Spring Cloud Alibaba？

Spring Cloud Alibaba是阿里巴巴开源的一款高性能的微服务RPC框架&#xff0c;关于Spring Cloud Alibaba的详细介绍我这里就不啰嗦了&#xff0c;大家可以参考官网及相关源码&#xff0c;我这里只是想聊的是“阿里巴巴为什么要开源Spring Cloud Alibaba”&#xff0c;只要追根朔…...

编程日记 2024/1/19 17:40:34

2024 前端高频面试题之 HTML/CSS 篇

【前言】随着市场的逐渐恶劣&#xff0c;通过总结面试题的方式来帮助更多的coder&#xff0c;也是记录自己的学习过程&#xff0c;温故而知新。欢迎各位同胞大大点评补充~ 前端面试题之 HTML/CSS 篇 1、HTML 语义化&#xff1f;2、块级元素&内联样式3、盒子模型的理解&…...

编程日记 2024/1/19 17:38:32

实现将信息作为txt,pdf,图片的形式保存到电脑~

PrintableUtils作为输出信息的工具类&#xff1a; package org.example; import com.itextpdf.text.*; import com.itextpdf.text.Font; import com.itextpdf.text.pdf.PdfWriter; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; im…...

编程日记 2024/1/19 17:35:29

服务器变矿机，该如何应对？

开始 恶意的挖矿程序会导致服务器cpu的异常占用&#xff0c;很让人讨厌。起初&#xff0c;我只是使用top命令显示出占用cpu不正常的进程&#xff0c;发现其中一个进程占用了百分之九十九点几&#xff0c;然后通过kill -9 <PID>命令干掉它。但总是过不了几天&#xff0c;…...

编程日记 2024/1/19 17:34:28

2018年认证杯SPSSPRO杯数学建模A题(第一阶段)海豚与沙丁鱼全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 探究海豚猎捕时沙丁鱼群的躲避运动模型 A题 海豚与沙丁鱼 原题再现&#xff1a; 沙丁鱼以聚成大群的方式来对抗海豚的捕食。由于水下光线很暗&#xff0c;所以在距离较远时&#xff0c;海豚只能使用回声定位方法来判断鱼群的整体位置&#xf…...

编程日记 2024/1/19 17:33:27

【Webpack】预处理器 - 常用loader介绍

选用合适的loader来处理不同的资源和不同的功能&#xff0c;以下是一些主流的loader&#xff0c;但这并不是全部&#xff0c;因为每时每刻都可能有新的loader 发布到 npm上 babel-loader babe-loader 用来处理ES6并将其编译为ESS&#xff0c;它使我们能够在最新的工程中使用最…...

编程日记 2024/1/19 17:32:26

lodash 的 _.groupBy 函数是怎么实现的？

说在前面 &#x1f388;lodash的_.groupBy函数可以将一个数组按照给定的函数分组&#xff0c;返回一个新对象。该函数接收两个参数&#xff1a;第一个参数是要进行分组的数组&#xff0c;第二个参数是用于分组的函数。该函数会对数组中的每个元素进行处理&#xff0c;返回一个值…...

编程日记 2024/1/19 17:30:24

（2024，ViM，双向 SSM 骨干，序列建模）利用双向状态空间模型进行高效视觉表示学习

Vision Mamba: Efficient Visual Representation Learning with Bidirectional State Space Model 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0.摘要 3. 方法 3.1. 基础知识 3.…...

编程日记 2024/1/19 17:26:19

docker容器和常用命令

1.什么是容器 容器是隔离的环境中运行的一个 进程 , 如果进程结束 , 容器就会停止. 细致: 容器的隔离环境 , 拥有自己的 ip 地址 , 系统文件 , 主机名 , 进程管理 , 相当于一个 mini的系统 2.容器 vs 虚拟机 3.Docker极速上手指南 #1.安装相关依赖. sudo yum install -y …...

编程日记 2024/1/19 17:24:17

【征服redis9】快速征服lua脚本

lua脚本&#xff0c;这个名字总让人想歪&#xff0c;不过老外发明名字&#xff0c;我们只能跟着叫了。这个脚本语言在redis里和Nginx里都有用&#xff0c;所以我们就来看一下。 目录 1 lua的介绍与说明 2 lua的基本语句体验 3.Lua的数据结构和高级特性 1 lua的介绍与说明 …...

编程日记 2024/1/19 17:21:14

vue3.2二次封装antd vue 中的Table组件，原有参数属性不变

vue3.2中的<script setup>语法 在项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antd vue 中表格的slots配置项,通过配合插槽来进行封装自定义表格; 这次主要的一个功能是编辑之后变成input框 修改了之后变成完成发送请求重新渲染表格&#xff1a; 子…...

编程日记 2024/1/19 17:18:11

GBASE南大通用分享，如何修改可信上下文

在以下示例中&#xff0c;假设该可信上下文对象 appserver 存在并启用。以下的 ALTER TRUSTED CONTEXT 语句将 appserver 可信上下文对象的对象方式重置为 DISABLE。当其处于该方式时&#xff0c; appserver 可信上下文仍然存在&#xff0c;但是它不能用于存取数据库服务器。 …...

编程日记 2024/1/19 17:17:09

冻结Prompt微调LM： T5 PET （a）

T5 paper: 2019.10 Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer Task: Everything Prompt: 前缀式人工prompt Model: Encoder-Decoder Take Away: 加入前缀Prompt&#xff0c;所有NLP任务都可以转化为文本生成任务 T5论文的初衷如…...

编程日记 2024/1/19 17:16:08

全球AI薪资热力图：旧金山VS深圳的残酷对比

一场不平等的技术竞赛当我们谈论人工智能&#xff08;AI&#xff09;的未来时&#xff0c;旧金山湾区与深圳无疑是最为闪耀的两个坐标。前者是硅谷的心脏&#xff0c;全球科技创新的策源地&#xff1b;后者是中国乃至世界硬件制造与新兴科技应用的前沿阵地。然而&#xff0c;对…...

编程新知 2026/4/2 18:22:28

佳维视工业嵌入式显示器在全电脑络筒机中的应用

佳维视工业嵌入式显示器凭借其高可靠性、环境适应性和功能集成性&#xff0c;可在全电脑络筒机的纱线张力控制、清纱监测、自动化操作、数据集成及远程运维等核心环节发挥关键作用&#xff0c;有效提升设备运行的稳定性、纱线加工质量及生产效率。具体应用如下&#xff1a;一、…...

编程新知 2026/4/2 17:43:35

2026年AI工具全面爆发：从ChatGPT到DeepSeek，谁在重塑下一代生产力？

还记得2023年ChatGPT刚出来时&#xff0c;大家都在惊叹"AI能聊天了"。但到了2026年&#xff0c;情况完全变了——AI不再是个炫技的玩具&#xff0c;而是实实在在地变成了"生产力工具"。程序员用它写代码&#xff0c;设计师用它做图&#xff0c;运营人用它写…...

编程新知 2026/4/2 15:47:23

Windows双网卡路由配置实战：内外网高效并行访问指南

1. 为什么需要双网卡并行访问内外网&#xff1f; 在企业办公环境中&#xff0c;我们经常遇到这样的场景&#xff1a;电脑需要同时连接内网处理公司业务系统&#xff0c;又要访问外网查询资料或使用云服务。如果频繁切换网络&#xff0c;不仅效率低下&#xff0c;还可能因为操作…...

编程新知 2026/4/2 15:43:21

别再手动翻译Excel了！用Python+腾讯翻译API，5分钟搞定整张表格

别再手动翻译Excel了&#xff01;用Python腾讯翻译API&#xff0c;5分钟搞定整张表格 当产品经理收到海外用户反馈的CSV文件时&#xff0c;第一反应往往是打开翻译网站逐行复制粘贴。我曾见过同事花三小时处理200条英文评论&#xff0c;而同样的工作用Python脚本只需喝杯咖啡的…...

编程新知 2026/4/2 15:25:01

毫米波雷达开发者必看：双级联方案如何用DDMA波形实现300米精准测距？

毫米波雷达双级联方案实战&#xff1a;DDMA波形设计如何突破300米测距极限&#xff1f; 当特斯拉HW4.0的雷达模块在暴雨中依然稳定输出300米外的障碍物坐标时&#xff0c;背后的技术密码正是双级联架构与DDMA波形的完美融合。作为L3级自动驾驶系统的"全天候之眼"&am…...

编程新知 2026/4/2 15:18:54

提升vue开发效率的秘诀，快马平台一键生成通用组件库

最近在重构公司的中后台管理系统时&#xff0c;发现很多重复性的工作占用了大量开发时间。经过实践总结&#xff0c;我发现通过合理封装通用组件和工具集&#xff0c;可以显著提升Vue3项目的开发效率。今天就来分享下我的实战经验。 通用表格组件的封装 这个组件基于Element Pl…...

编程新知 2026/4/2 15:06:33

4步解放炉石玩家：开源脚本工具从配置到精通全指南

4步解放炉石玩家&#xff1a;开源脚本工具从配置到精通全指南 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/he/Hearthstone-Script 你是否也曾遇到这样的困境&#xff1a;每…...

编程新知 2026/4/2 14:48:24

3分钟掌握Playnite便携版：打造你的移动游戏库管理中心

3分钟掌握Playnite便携版&#xff1a;打造你的移动游戏库管理中心 【免费下载链接】Playnite Video game library manager with support for wide range of 3rd party libraries and game emulation support, providing one unified interface for your games. 项目地址: htt…...

编程新知 2026/4/2 14:44:18

通过WireShark与WinHex从pcap数据流中提取并修复损坏的JPG图片

1. 从pcap文件中筛选JPG数据流 当你拿到一个网络抓包文件&#xff08;pcap格式&#xff09;&#xff0c;里面可能混杂着各种网络流量数据。要从中提取出图片文件&#xff0c;首先得学会用WireShark这个神器来筛选目标数据。我处理过不少类似的案例&#xff0c;发现很多新手容易…...

编程新知 2026/4/2 13:50:50