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

CSS选择器（1）

news 2025/9/18 8:10:33

以内部样式表编写CSS选择器，其主要编写在<head></head>元素里，通过<style></style>标签来定义内部样式表。

基本语法为：

        选择器{

                        声明块

                        }

 声明块：是由一对大括号括起来，声明块中是一个一个的声明。是一对名值对结构，一个样式名对应一个或多个样式值，之间用;隔开。

选择器：

常见的选择器主要由以下几种：

1.元素选择器

        基本语法：标签名{}

           p{color:rgb(0,255,0); font-size: 20px;}

2.id选择器

        根据元素的id属性选中唯一的一个元素。一般一个元素都由一个唯一的id值。

基本语法：#id值{}

    #p1{color: rgb(255,0,255);font-size: 30px;}

3.类选择器：

        根据元素的class属性选中元素， class属性是可以重复的，拥有同一个class的元素可以说他们是同一类元素。

基本语法：.class值{}

            .p2{color: rgb(0,0,255);}.p3{font-size: 40px;}

4.通配选择器：

        选择页面中的所有元素。

基本语法：*{}

5.属性选择器：

        根据元素的属性来选择元素。      

基本语法：

  • [属性名]{}                   选中含有该属性的所有元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中所有含有title属性的元素 */[title]{color: rgb(255,0,0); }</style></head>
<body><p>随便写写吧</p><p title="滕王阁序">落霞与孤鹜齐飞，秋水共长天一色。</p><div title="醉翁亭记"> 醉翁之意不在酒，在乎山水之间也。</div><section title="登高">无边落木萧萧下，不尽长江滚滚来。</section><article title="岳阳楼记">先天下之忧而忧，后天下之乐而乐。</article><p title="岳阳楼记">不以物喜，不以己悲。</p><div title="登高">万里悲秋常作客，百年多病独登台。</div>
</body>
</html>

     

  • [属性名=属性值]{}       选中含有该属性为指定属性值的所有元素
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中所有含有title属性值为醉翁亭记元素 */[title=醉翁亭记]{color: rgb(255,0,0); }</style></head>

  • [属性名^=属性值]        选中以属性以指定属性值开头的所有元素
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中所有含有title属性值为岳开头的元素 */[title^=岳]{color: rgb(255,0,0); }</style></head>

  • [属性名$=属性值]        选中以属性以指定属性值结束的所有元素
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中所有含有title属性值为醉翁亭记元素 */[title$=记]{color: rgb(255,0,0); }</style></head>

 

  • [属性名*=属性值]        选中此属性的属性值中含有指定属性值的所有元素
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中所有含有title属性值中含有楼的元素 */[title*=楼]{color: rgb(255,0,0); }</style></head>

6.交集选择器 ：

        可以将多种选择器一起写，表示这些元素必须同时满足所写的多个选择器。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 选中所有含有title属性值中含有楼的p元素 */p[title*=楼]{color: rgb(255,0,0); }</style></head>

7.分组选择器（并集选择器）：

        同时选中多个选择器对应的元素。

        基本语法：选择器1，选择器2，选择器3，……选择器n{}

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分组选择器</title><style>/* 分组选择器：同时选中多个选择器对应的元素。语法：选择器1，选择器2，选择器3，……选择器n{}*//* 选中id为滕王阁序，类名为醉翁亭记和所有的div元素 */#滕王阁序,.醉翁亭记, div{color: blue;font-size: 40px;}</style></head>
<body><p>随便写写吧</p><p id="滕王阁序">落霞与孤鹜齐飞，秋水共长天一色。</p><div class="醉翁亭记"> 醉翁之意不在酒，在乎山水之间也。</div><section title="登高">无边落木萧萧下，不尽长江滚滚来。</section><article class="岳阳楼记">先天下之忧而忧，后天下之乐而乐。</article><p class="岳阳楼记">不以物喜，不以己悲。</p><div title="登高">万里悲秋常作客，百年多病独登台。</div><div>我是一个没有类名和id值的div元素</div>
</body>
</html>

相关文章：

CSS选择器（1）

以内部样式表编写CSS选择器&#xff0c;其主要编写在<head></head>元素里&#xff0c;通过<style></style>标签来定义内部样式表。 基本语法为&#xff1a; 选择器{ 声明块 } 声明块&#xff1a;是由一对大括号括起来&#xff0c;声明块中是一个一个的…...

编程日记 2024/7/17 2:50:48

Claude 3.5 Sonnet模型发布，对比ChatGPT4o孰强孰弱

Anthropic 这家生而为打击 OpenAI 安全问题的公司&#xff0c;正式发布了Claude 3.5 Sonnet模型&#xff01; 用官网的话就是&#xff1a; 今天&#xff0c;我们推出了 Claude 3.5 Sonnet&#xff0c;这是我们即将推出的 Claude 3.5 型号系列中的第一个版本。Claude 3.5 Sonne…...

编程日记 2024/7/17 2:47:45

MySQL 分库分表

分表 分表 将表按照某种规则拆分成多个表。 分表的使用原因 当数据量超大的时候&#xff0c;B-Tree索引效果很变差。 垂直分区 切分原则&#xff1a;把不常用或存储内容比较多的字段分到新的表中可使表存储更多数据。 原因&#xff0c;Innodb主索引叶子节点存储着当前行的所有信…...

编程日记 2024/7/17 2:46:44

AutoMQ 社区双周精选第十二期（2024.06.29~2024.07.12）

本期概要 欢迎来到 AutoMQ 第十一期双周精选&#xff01;在过去两周里&#xff0c;主干动态方面&#xff0c;AutoMQ 跟进了 Apache Kafka 3.4.x BUG 修复&#xff0c;并进行了CPU & GC 性能优化&#xff0c;另外&#xff0c;AutoBalancing 的 Reporter 和 Retriever 也将支…...

编程日记 2024/7/17 2:43:41

Web开发：＜div＞标签作用

div作用 介绍基本用法特点和用途样式化示例嵌套示例与其他标签的对比总结 介绍 在Web开发中&#xff0c;<div> 标签是一个通用的容器元素&#xff0c;用于将HTML文档中的内容分组。它是一个块级元素&#xff0c;通常用于布局目的&#xff0c;因为它可以包含其他块级元素…...

编程日记 2024/7/17 2:42:34

如何使用unittest框架来编写和运行单元测试

Python 的 unittest 框架是用于编写和运行可重复的测试的一个强大工具。它允许你定义测试用例、测试套件、测试运行器和测试固件&#xff08;fixtures&#xff09;&#xff0c;从而系统化地测试你的代码。以下是如何使用 unittest 框架来编写和运行单元测试的基本步骤&#xff…...

编程日记 2024/7/17 2:30:24

2024最新超详细SpringMvc常用注解总结

SpringMVC常用注解 控制器&#xff08;Controller&#xff09;相关注解&#xff1a; 1.Controller Controller 注解用于标识一个类为 Spring MVC 的控制器&#xff0c;它能够处理用户的请求并返回相应的视图或数据。通常与 RequestMapping 注解一起使用&#xff0c;以定义请求…...

编程日记 2024/7/17 2:28:22

Linux硬件中断（IRQ）的基础知识

目录 一、中断的概念1.1 什么是硬件中断1.2 中断类型二、中断处理的工作原理2.1 中断请求2.2 中断向量2.3 中断服务例程（ISR）2.4 上下文切换2.5 中断处理2.6 任务恢复三、中断处理的编程3.1 注册中断处理函数3.2 注销中断处理函数四、中断和系统性能4.1 中断风暴4.2 IRQ亲和性…...

编程日记 2024/7/17 2:27:20

DP讨论——适配器模式

学而时习之&#xff0c;温故而知新。 敌人出招&#xff08;使用场景&#xff09; 说是自己的程序对接第三方的库&#xff0c;但是自己的代码的接口设计完毕了&#xff0c;如何对接上&#xff1f; 你出招 适配器模式就是为此而生的——我觉得应该是该解决方法被命名为了适配…...

编程日记 2024/7/17 2:25:18

window下tqdm进度条

原代码是linux下运行&#xff0c;修改后可在window下运行。 #ifndef TQDM_H #define TQDM_H#include <chrono> #include <ctime> #include <numeric> #include <ios> #include <string> #include <cstdlib> #include <iostream> #i…...

编程日记 2024/7/17 2:24:12

记录些Redis题集（1）

Redis内存淘汰触发条件的相关配置如下&#xff1a; Redis通过配置项maxmemory来设定其允许使用的最大内存容量。当Redis实际占用的内存达到这一阈值时&#xff0c;将触发内存淘汰机制&#xff0c;开始删除部分数据以释放内存空间&#xff0c;防止服务因内存溢出而异常。 Redi…...

编程日记 2024/7/17 2:21:09

防火墙双机热备带宽管理综合实验

一、实验拓扑 二、实验要求 12&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW3&#xff0c;生产区和办公区的流量走FW1 13&#xff0c;办公区上网用户限制流量不超过100M&am…...

编程日记 2024/7/17 2:20:08

【Redis】哨兵(sentinel)

文章目录 一、哨兵是什么&#xff1f;二、 哨兵sentinel文件参数三、 模仿主机redis宕机四、哨兵运行流程和选举原理SDOWN主观下线ODOWN客观下线 五、 使用建议 以下是本篇文章正文内容 一、哨兵是什么&#xff1f; 哨兵巡查监控后台master主机是否故障&#xff0c;如果故障了…...

编程日记 2024/7/17 2:19:06

2024年高职云计算实验室建设及云计算实训平台整体解决方案

随着云计算技术的飞速发展&#xff0c;高职院校亟需构建一个与行业需求紧密结合的云计算实验室和实训平台。以下是针对2024年高职院校云计算实验室建设的全面解决方案。 1、在高职云计算实验室的建设与规划中&#xff0c;首要任务是立足于云计算学科的精准定位&#xff0c;紧密…...

编程日记 2024/7/17 2:18:05

入门实战篇，利用PADS Layout画电阻电容电感的封装

大家好&#xff0c;我是山羊君Goat。 不管怎么设计&#xff0c;怎么学习硬件知识&#xff0c;都需要实战&#xff0c;硬件工程师设计PCB是必不可少的&#xff08;大部分来说&#xff09;&#xff0c;本篇主要从最基本的电阻电容电感的PCB设计封装来说起&#xff0c;算是最基础…...

编程日记 2024/7/17 2:17:04

解决npm install 安装报错记录贴

前言 环境背景 nodeJS v.14.8.3(nvm安装) package.json: “node-sass”:“8.0.0” 网络环境&#xff1a; 公司内网 镜像地址&#xff1a;公司的镜像源 解决报错过程&#xff1a; 1.换了最新版 vscode&#xff0c; 然后重装 node_modules 还是不行&#xff0c; 报PostCSS rec…...

编程日记 2024/7/17 2:08:59

CollectionUtils的使用

1、非空判断 判断集合是否为空 List<String>对象list&#xff0c;可以使用CollectionUtils中的isEmpty方法来判断list是否为空。代码如下 List<String> list new ArrayList<>(); boolean isEmpty CollectionUtils.isEmpty(list); System.out.println(is…...

编程日记 2024/7/17 2:04:55

WEB前端03-CSS3基础

CSS3基础 1.CSS基本概念 CSS是Cascading Style Sheets&#xff08;层叠样式表&#xff09;的缩写&#xff0c;它是一种对Web文档添加样式的简单机制&#xff0c;是一种表现HTML或XML等文件外观样式的计算机语言&#xff0c;是一种网页排版和布局设计的技术。 CSS的特点 纯C…...

编程日记 2024/7/17 2:02:48

【java深入学习第7章】用 Spring Boot 和 Java Mail 轻松实现邮件发送功能

引言 在现代的企业应用中&#xff0c;邮件发送是一个非常常见的功能。无论是用户注册后的验证邮件&#xff0c;还是系统通知邮件&#xff0c;邮件服务都扮演着重要的角色。本文将介绍如何在Spring Boot项目中整合Java Mail&#xff0c;实现发送邮件的功能。 一、准备工作 在…...

编程日记 2024/7/17 2:01:47

Linux抽象套接字

在UNIX和类UNIX系统中，socket编程提供了一种机制，允许进程之间进行通信。其中，UNIX域套接字（UNIX domain socket）是一种特殊的套接字，用于同一台机器上的进程间通信（IPC）。UNIX域套接字可以使用两种类型的地址：路径名套接字（pathname socket）和抽象套接字（abstract…...

编程日记 2024/7/17 2:00:46

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/9 16:59:16

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/8/6 4:17:44

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/9/13 0:08:57

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/9/9 18:41:56

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/9/14 8:32:04

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2025/9/4 3:13:15

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/9/9 10:09:30

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46