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

CSS- 1.1 css选择器

article 2025/9/24 18:32:14

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

系列文章目录

前言

一、CSS选择器

1. 元素选择器

2. 类选择器

3. ID选择器

4. 属性选择器

5. 后代选择器

6. 子选择器

7. 相邻兄弟选择器

8. 通用兄弟选择器

9. 伪类选择器

10. 伪元素选择器

二、代码实例

1、代码实战及运行

（1）CSS基本选择器

①代码

②代码运行

（2）CSS复合选择器

①代码

②代码运行

（3）超链接-伪类选择器

①代码

②代码运行

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、CSS选择器

CSS（层叠样式表）选择器用于选择HTML元素并应用样式。它们是CSS中用于定位元素的基本工具。下面是一些CSS选择器及其用法：

1. 元素选择器

元素选择器用于选择指定类型的HTML元素。

p {color: blue;
}

上面的代码将选择所有的<p>元素，并将其文本颜色设置为蓝色。

2. 类选择器

类选择器用于选择具有特定类属性的元素。类名前面有一个点（.）。

.my-class {font-size: 16px;
}

上面的代码将选择所有具有class="my-class"的元素，并将其字体大小设置为16像素。

3. ID选择器

ID选择器用于选择具有特定ID属性的元素。ID前面有一个井号（#）。

#my-id {background-color: yellow;
}

上面的代码将选择具有id="my-id"的元素，并将其背景颜色设置为黄色。

4. 属性选择器

属性选择器用于选择具有特定属性的元素。

[type="text"] {border: 1px solid black;
}

上面的代码将选择所有type="text"的元素，并为其添加黑色边框。

5. 后代选择器

后代选择器用于选择某个元素内的所有特定后代元素。

div p {margin: 10px;
}

上面的代码将选择所有在<div>元素内的<p>元素，并为其添加10像素的外边距。

6. 子选择器

子选择器用于选择某个元素的直接子元素。

ul > li {list-style-type: none;
}

上面的代码将选择所有作为<ul>直接子元素的<li>元素，并移除其列表标记。

7. 相邻兄弟选择器

（小编认为这里的内容有点点晦涩，附了例子解释）

相邻兄弟选择器用于选择紧接在另一个元素后的元素，且二者有相同的父元素。

h1 + p {font-weight: bold;
}

上面的代码将选择所有紧接在<h1>元素后的<p>元素，并将其字体加粗。

更具体解释一下：假设一个情景，有很多<p>元素，但是只有紧跟在<h1>元素后的<p>元素才需要加粗，这时的<h1>元素相当于一个定位符号，确定了需要加粗字号的<p>元素的位置

小编这里举个例子：

     	<!-- p{段落$}*4 按tab --><!-- 1.所有段落字体为30px --><!-- 2.段落二加粗变蓝 --><!-- 3.段落3下划线 --><p>段落一</p><p class="bule">段落二</p><h1>定位</h1><p id="id1">段落三</p><p >段落四</p>

这里的<h1>元素紧邻着的<p>元素，内容是段落三，先看没有添加让<h1>元素后的<p>元素字体加粗的样式时，运行内容为：

当添加让<h1>元素后的<p>元素字体加粗的样式后：可以明显看到段落三字体被加粗了。

h1 + p {font-weight: bold;}

注意：此时的段落四并没有被加粗，这里需要区别于通用兄弟选择器，看一下下面的例子就能明白。

8. 通用兄弟选择器

通用兄弟选择器用于选择在某个元素之后的所有兄弟元素。

h2 ~ p {color: green;
}

上面的代码将选择所有在<h2>元素之后的所有<p>元素，并将其文本颜色设置为绿色。

还是上面的例子，这里的样式使用通用兄弟选择器，没有添加通用兄弟选择器时的代码运行如下：

<!-- p{段落$}*4 按tab --><!-- 1.所有段落字体为30px --><!-- 2.段落二加粗变蓝 --><!-- 3.段落3下划线 --><p>段落一</p><p class="bule">段落二</p><h1>定位</h1><p id="id1">段落三</p><p >段落四</p>

添加了通用兄弟选择器后的样式如下：段落三和段落四的字体都被加粗

h1 ~ p {font-weight: bold;}

9. 伪类选择器

伪类选择器用于选择元素的特定状态。

a:hover {color: red;
}

上面的代码将选择鼠标悬停在<a>元素上时的状态，并将其文本颜色设置为红色。

这里举例，修改为：鼠标悬停在<a>元素上时，将文本颜色设置为红色

p:hover {color: red;}

可以看到，当鼠标悬停在段落一时，段落一字体变红。

10. 伪元素选择器

伪元素选择器用于选择元素的特定部分。

p::first-line {font-weight: bold;
}

上面的代码将选择<p>元素的第一行文本，并将其字体加粗。

这些基本选择器可以组合使用，以实现更复杂的选择和样式应用。通过灵活运用这些选择器，可以创建出丰富且响应迅速的网页设计。

二、代码实例

这里举例使用的代码如下，大家可以根据给出的基本选择器的举例代码，进行运行调试：

1、代码实战及运行

（1）CSS基本选择器

①代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css基本选择器</title><style type="text/css">/*标签选择器*/p{font-size:30px ;}/*类选择器*/.bule{font-weight: 700;color: blue;}/*id选择器 #id名*/#id1{text-decoration: underline;}img{position: absolute;left: 45%;top: 300px;width: 100px;}/* h1 ~ p {font-weight: bold;}p:hover {color: red;} */</style></head><body><!-- p{段落$}*4 按tab --><!-- 1.所有段落字体为30px --><!-- 2.段落二及段落四加粗变蓝 --><!-- 3.段落3下划线 --><p>段落一</p><p class="bule">段落二</p><h1>定位</h1><p id="id1">段落三</p><p class="bule">段落四</p><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>

②代码运行

（2）CSS复合选择器

①代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css复合选择器</title><style type="text/css">/* 交集选择器 标签选择器类选择器 中间没有空格 */p.p1{color: pink;}/* 并集 基本选择器 中间用逗号链接* */p,.p2,div,span{font-size: 30px;}/* 后代选择器 祖辈在前 后辈在后 中间空格连接 */div span{text-decoration: underline;}div ul li span{color: red;}/* 子选择器 父大于子 */div>span{color: green;}img{position: absolute;left:45%;top: 300px;width:100px;}</style></head><body><p class="p1">段落一</p><p class="p2">段落二</p><h2 class="p1">标题一</h2><div id=""><span id="">希望世界和平</span><ul><li><span>希望世界和平222</span></li></ul></div><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>

②代码运行

（3）超链接-伪类选择器

①代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接-伪类选择器</title><style type="text/css">/* 未被访问 悬停 点击 访问过以后 *//* a:link 等同于a *//* 可以没有hover active 但是必须有Link和visited */a:link{color: red;      /* 将未被访问的链接文本颜色设置为红色。 */font-size: 60px;}a:hover{color: pink;    /* 当鼠标悬停在链接上时，将链接文本颜色更改为粉色 */}a:active{color: green;   /* 当链接被点击时，将链接文本颜色更改为绿色 */}a:visited{color: skyblue;    /* 将已被访问的链接文本颜色设置为天蓝色 */}</style></head><body><a href="cs2-1.html">新闻</a><a ><h3 align="center">返回首页</h3></a><a href="https://www.baidu.com/">百度</a><!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> --></body>
</html>

②代码运行

总结

以上就是今天要讲的内容，本文简单记录了css选择器，仅作为一份简单的笔记使用，大家根据注释理解，您的点赞关注收藏就是对小编最大的鼓励！

CSS- 1.1 css选择器

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 系…...

编程日记 2025/9/24 18:32:14

ABP-Book Store Application中文讲解 - Part 2: The Book List Page

本章用于介绍如何创建Book List Page。 TBD 1. 汇总 ABP-Book Store Application中文讲解-汇总-CSDN博客 2. 前一章 ABP-Book Store Application中文讲解 - Part 1: Creating the Server Side 项目之间的引用关系。目录 1. 多语言配置 1.1 zh-Hans.json 1.2 en.jso…...

编程日记 2025/9/19 12:14:45

08 web 自动化之 PO 设计模式详解

文章目录一、什么是 POM二、如何基于 POM 进行自动化框架架构？1、base 层封装2、pageobjects 层封装3、TestCases 层封装三、元素和方法分离&数据分离1、哪些部分可以进行分离2、示例代码四、总结一、什么是 POM POM page object model 页面对象模型 WEB 自…...

编程日记 2025/9/25 6:15:07

langchain4j集成QWen、Redis聊天记忆持久化

langchain4j实现聊天记忆默认是基于进程内存的方式，InMemoryChatMemoryStore是具体的实现了，是将聊天记录到一个map中，如果用户大的话，会造成内存溢出以及数据安全问题。位了解决这个问题 langchain4提供了ChatMemoryStore接口&am…...

编程日记 2025/9/6 14:45:11

WebGL图形编程实战【7】：变换流水线 × 坐标系与矩阵精讲

变换流水线 #mermaid-svg-Omabd9LSNCdIvWqB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Omabd9LSNCdIvWqB .error-icon{fill:#552222;}#mermaid-svg-Omabd9LSNCdIvWqB .error-text{fill:#552222;stroke:#552222;…...

编程日记 2025/9/25 2:54:20

在Angular中使用Leaflet构建地图应用

Leaflet是一个用于创建地图的JavaScript库，它包含许多功能，并且非常适用于移动设备。准备 nodejs: v20.15.0 npm: 10.7.0 angular: 19.2.10 创建一个地图应用工程 npx angular/cli new my-leaflet-app --stylecss --routingfalse --skip-tests提示 …...

编程日记 2025/9/15 16:16:06

鸿蒙next播放B站视频横屏后的问题

（此文讨论范围为b站视频链接，且不包括b站直播链接；android/iOS的webview播放b站视频完全没有这么多问题） 1、竖屏播放没问题从一个竖屏页p1点击进入视频页p2，p2页仍为竖屏； p2页有一Web组件，…...

编程日记 2025/9/25 4:29:17

DVWA靶场通关笔记-SQL注入(SQL Injection Medium级别)

目录一、SQL Injection 二、代码审计（Medium级别） 1、源码分析 （1）index.php （2）Medium.php 2、渗透思路 （1）SQL安全问题分析 （2）SQL渗透思路三、…...

编程日记 2025/9/25 4:52:36

vue异步导入

vue的异步导入大家开发vue的时候或多或少路由的异步导入 component: () >import(“/views/A_centerControl/intelligent-control/access-user-group”),当然这是路由页面，那么组件也是可以异步导入的使用方式组件的异步导入非常简单，主要是一个…...

编程日记 2025/9/24 19:14:26

【Redis】压缩列表

目录 1、背景2、压缩列表【1】底层结构【2】特性【3】优缺点 1、背景 ziplist（压缩列表）是redis中一种特殊编码的双向链表数据结构，主要用于存储小型列表和哈希表。它通过紧凑的内存布局和特殊的编码方式来节省内存空间。 2、压缩列表【1…...

编程日记 2025/7/8 7:04:33

2025年，如何制作并部署一个完整的个人博客网站

欢迎访问我的个人博客网站：欢迎来到Turnin的个人博客 github开源地址：https://github.com/Re-restart/my_website 前言 2024年年初，从dji实习回来之后，我一直想着拓宽自己的知识边界。在那里我发现虽然大家不用java，…...

编程日记 2025/9/24 18:58:25

.NET 8 + Angular WebSocket 高并发性能优化

.NET 8 Angular WebSocket 高并发性能优化。 .NET 8 WebSocket 高并发性能优化 WebSocket 是一种全双工通信协议，允许客户端和服务端之间保持持久连接。在高并发场景下，优化 WebSocket 的性能至关重要。以下是针对 .NET 8 中 WebSocket 高并发性能优化…...

编程日记 2025/9/19 4:22:05

腾讯云运营开发 golang一面

redis为什么单线程会快每秒10w吞吐量 io多路复用一个文件描述符整体拷贝；调用epoll_ctl 单个传递内核遍历文件描述符判断是否有事件发送；回调函数列表维护修改有事件发送的socket为可读或可写，返回整个文件描述符；返回链…...

编程日记 2025/9/18 7:42:00

一个简单的静态页面

这个页面采用了现代化的 UI 设计，包括卡片式布局、微交互动画、分层设计和响应式结构。页面结构清晰，包含导航栏、英雄区域、功能介绍、产品特性、用户评价和联系表单等完整组件，可作为企业官网或产品介绍页面的基础模板。登录后复制 <!D…...

编程日记 2025/9/24 18:32:19

使用 163 邮箱实现 Spring Boot 邮箱验证码登录

使用 163 邮箱实现 Spring Boot 邮箱验证码登录本文将详细介绍如何使用网易 163 邮箱作为 SMTP 邮件服务器，实现 Spring Boot 项目中的邮件验证码发送功能，并解决常见配置报错问题。一、为什么需要邮箱授权码？ 出于安全考虑，大…...

编程日记 2025/9/24 18:32:25

多模态大语言模型arxiv论文略读（六十八）

Image-of-Thought Prompting for Visual Reasoning Refinement in Multimodal Large Language Models ➡️ 论文标题：Image-of-Thought Prompting for Visual Reasoning Refinement in Multimodal Large Language Models ➡️ 论文作者：Qiji Zhou, Ruoc…...

编程日记 2025/9/24 18:32:23

APS「多目标平衡算法」如何破解效率与弹性的永恒博弈

APS（高级计划与排程）系统作为企业智能制造的核心引擎，通过整合需求预测、产能规划、生产调度、物料管理及数据分析等模块，构建了覆盖产品全生产流程的“感知-决策-执行-优化”闭环体系。精准需求预测 APS系统通过构建需求特征数…...

编程日记 2025/9/24 18:56:26

网张实验操作-防火墙+NAT

实验目的了解防火墙（ENSP中的USG5500）域间转发策略配置、NAT（与路由器NAT配置命令不同）配置。网络拓扑两个防火墙连接分别连接一个内网，中间通过路由器连接。配置NAT之后，内网PC可以ping公网&#xf…...

编程日记 2025/9/6 16:47:33

Spring 中常见的属性注入方式（XML配置文件）

在 Spring 中，XML 配置属性注入。以下是几种常见的属性注入方式及其对应的简单示例代码。 1. 构造器注入构造器注入是指通过类的构造函数来设置依赖项。示例类： public class MyService {private final MyRepository myRepository;public MyService(MyRepository myRe…...

编程日记 2025/9/12 13:53:38

让 - 艾里克・德布尔与斯普林格出版公司：科技变革下的出版业探索

在数字化浪潮席卷全球的当下，传统出版行业面临着前所未有的挑战与机遇。《对话 CTO，驾驭高科技浪潮》的第 10 章聚焦于让 - 艾里克・德布尔（Jean - Eric Debeure）及其所在的斯普林格出版公司（Springer Publishing Comp…...

编程日记 2025/6/25 8:38:37

【技巧】离线安装docker镜像的方法

回到目录【技巧】离线安装docker镜像的方法 0. 为什么需要离线安装？ 第一、由于docker hub被墙，所以拉取镜像需要配置国内镜像源第二、有一些特殊行业服务器无法接入互联网，需要手工安装镜像 1. 可以正常拉取镜像服务器操作服务器…...

编程日记 2025/6/28 23:45:16

05 web 自动化之 selenium 下拉鼠标键盘文件上传

文章目录一、下拉框操作二、键盘操作三、鼠标操作四、日期控件五、滚动条操作六、文件上传七、定位windows窗口及窗口的元素总结：页面及元素常用操作一、下拉框操作 from selenium.webdriver.support.select import Select import time from selenium.webdriver.…...

编程日记 2025/9/24 19:18:32

《Python星球日记》第73天：情感分析与主题建模

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）目录一、情感分析基础1. 情感分析的应用场景2. 基于规则的方法3. 基于深度学习的方法3.1 使用LSTM进行情感分析3.2 基于BERT的情感分析二、主题建模…...

编程日记 2025/9/18 6:02:48

数学复习笔记 10

前言我觉得数学的高分乃至满分属于那些，聪明，坚韧，勇敢，细致的人。我非常惭愧自己不是这样的人，我在生活中发现了这样的同学，和他们交流的时候我常常感到汗流浃背，因为他们非常扎实的基础知识…...

编程日记 2025/9/24 4:15:29

07 web 自动化之 Unittest 应用：测试报告装饰器断言

文章目录一、常见的第三方库结合 unittest 生产 html 格式测试报告1、HtmlTestRunner2、BeatifulReport 二、装饰器 unittest.skip 强制跳过&条件跳过三、unittest的常用断言方法一、常见的第三方库结合 unittest 生产 html 格式测试报告 1、HtmlTestRunner 官网下载 …...

编程日记 2025/9/22 10:13:18

Spring Cloud探索之旅：从零搭建微服务雏形 (Eureka, LoadBalancer 与 OpenFeign实战)

引言大家好！近期，我踏上了一段深入学习Spring Cloud构建微服务应用的旅程。我从项目初始化开始，逐步搭建了一个具备服务注册与发现、客户端负载均衡以及声明式服务调用功能的基础微服务系统。本文旨在记录这一阶段的核心学习内容与实践成果…...

编程日记 2025/9/24 18:32:21

9.2.高并发系统

目录一、高并发系统设计原则核心设计哲学 • CAP权衡：一致性、可用性、分区容错性的场景化选择 • BASE理论：最终一致性与柔性事务的落地策略性能与扩展性准则 • 水平扩展 vs 垂直扩展：无状态服务与有状态服务的扩展策略 • 异步化设计…...

编程日记 2025/6/17 10:01:38

Apollo学习——planning模块（3）之planning_base

planning_component、planning_base、on_lane_planning 和 navi_planning 的关系 1. 模块关系总览继承层次 PlanningComponent：Cyber RT 框架中的入口组件，负责调度规划模块的输入输出和管理生命周期。PlanningBase：规划算法的抽象基类&…...

编程日记 2025/9/18 6:06:53

当 AI 邂逅丝路：揭秘「丝路智旅」，用 RAG 重塑中阿文化旅游体验

目录系统命名：丝路智旅 (Silk Road Intelligent Travel)系统概述系统架构设计系统功能模块技术选型：为何是它们？系统优势与特点未来展望与扩展总结在数字浪潮席卷全球的今天，古老的丝绸之路正在以一种全新的方式焕发生机。当深厚的文化底蕴遇上尖端的人工智能技术，会碰撞…...

编程日记 2025/9/24 18:32:34

18.Excel数据透视表：第1部分创建数据透视表

一什么是数据透视表通过万花筒可以用不同的方式査看里面画面图像，在excel中可以将数据透视表看作是对准数据的万花筒，用不同角度去观察数据，也可以旋转数据，对数据进行重新排列，对大量的数据可以快速的汇总和建立交叉…...

编程日记 2025/9/24 18:32:29

系列文章目录

前言

一、CSS选择器

1. 元素选择器

2. 类选择器

3. ID选择器

4. 属性选择器

5. 后代选择器

6. 子选择器

7. 相邻兄弟选择器

8. 通用兄弟选择器

9. 伪类选择器

10. 伪元素选择器

二、代码实例

1、代码实战及运行

（1）CSS基本选择器

①代码

②代码运行

（2）CSS复合选择器

①代码

②代码运行

（3）超链接-伪类选择器

①代码

②代码运行

总结

相关文章：