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

CSS选择器（1）

news 2025/11/8 20:59:20

以内部样式表编写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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/10/27 7:52:30

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/11/7 20:05:07

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/11/8 1:50:58

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/11/7 11:24:50

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/11/7 19:35:34

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/11/7 15:45:31