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

CSS选择器（1）

news 文章来源：https://blog.csdn.net/ShawLee0925/article/details/140426850 2025/5/16 3:30:08

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

GA-Kmeans-Transformer-GRU时序聚类+状态识别组合模型，创新发文无忧！

GA-Kmeans-Transformer-GRU时序聚类状态识别组合模型&#xff0c;创新发文无忧&#xff01; 目录 GA-Kmeans-Transformer-GRU时序聚类状态识别组合模型&#xff0c;创新发文无忧&#xff01;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.GA-Kmeans-Transformer-GRU时…...

编程日记 2024/7/17 1:58:44

Python面试全攻略：基础知识、特性、算法与实战解析

随着Python的普及&#xff0c;越来越多的人开始学习Python并尝试在面试中展示自己的技能。在这篇文章中&#xff0c;我们将探讨Python面试需要注意的问题以及一些经典的Python算法。 一、Python面试需要注意的问题 基础知识 在Python面试中&#xff0c;基础知识是非常重要的。…...

编程日记 2024/7/17 1:55:42

Linux网络编程-socket套接字使用详解

1.概念 在Linux中&#xff0c;套接字&#xff08;socket&#xff09;是一种通信机制&#xff0c;用于实现不同进程之间或同一主机上的不同线程之间的数据交换。它是网络编程的基础&#xff0c;允许应用程序通过网络进行通信&#xff0c;也可以在同一台机器上的不同进程间进行通…...

编程日记 2024/7/17 1:50:38

Leetcode 236. 二叉树的最近公共祖先

142. 环形链表 II 问题描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&am…...

编程日记 2024/7/17 1:49:37

GPT-4从0到1搭建一个Agent简介

GPT-4从0到1搭建一个Agent简介 1. 引言 在人工智能领域&#xff0c;Agent是一种能够感知环境并采取行动以实现特定目标的系统。本文将简单介绍如何基于GPT-4搭建一个Agent。 2. Agent的基本原理 Agent的核心是感知-行动循环&#xff08;Perception-Action Loop&#xff09;…...

编程日记 2024/7/17 1:45:33

docker镜像源配置

docker默认的镜像源&#xff0c;走的是国外网络&#xff0c;下载速度感人&#xff0c;修改镜像源&#xff0c;进入/etc/docker/ cd /etc/docker 编辑文件daemon.json(没有就直接创建)&#xff0c;内容&#xff1a; {"registry-mirrors": ["https://q7ta64ip.…...

编程日记 2024/7/17 1:40:29

解读InnoDB数据库索引页与数据行的紧密关联

目录 一、快速走进索引页结构 &#xff08;一&#xff09;整体展示说明 &#xff08;二&#xff09;内容说明 File Header&#xff08;文件头部&#xff09; Page Header&#xff08;页面头部&#xff09; Infimum Supremum&#xff08;最小记录和最大记录&#xff09; …...

编程日记 2024/7/17 1:38:27

以数据编织，重构数据管理新范式

大数据产业创新服务媒体 ——聚焦数据 改变商业 人工智能几乎统一了全球最顶尖科技公司的认知&#xff1a;这个时代&#xff0c;除了AI&#xff0c;没有第二条路可走。 人工智能的技术逻辑颇有一种“暴力美学”&#xff0c;它依托于海量大数据和超高算力的训练和推理&#xff…...

编程日记 2024/7/17 1:36:25

在linux x86服务器安装jdk

安装JDK&#xff08;Java Development Kit&#xff09;在Linux x86 服务器上可以按照以下步骤进行操作。以下步骤假设你有root权限或者sudo权限。 1. 下载JDK安装包 首先&#xff0c;你需要从Oracle官网或者OpenJDK官网下载JDK的安装包。可以选择对应的版本&#xff0c;比如J…...

编程日记 2024/7/17 1:34:23

2024智慧竞技游戏俱乐部线下面临倒闭？

在2024年的中国&#xff0c;智慧竞技游戏俱乐部如雨后春笋般在二三线城市中兴起&#xff0c;它们不仅是年轻人娱乐的场所&#xff0c;更是智慧与技巧的较量场。然而&#xff0c;随着疫情的冲击&#xff0c;这些俱乐部面临着前所未有的挑战。本文将通过一个小镇上的故事&#xf…...

编程日记 2024/7/17 1:32:21