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

css选择器

news 文章来源：https://blog.csdn.net/weixin_64311421/article/details/129067864 2025/1/28 1:14:04

目录

      • 1、基本选择器
        • （1）id选择器
        • （2）类选择器
        • （3）标签选择器
        • （4）逗号选择器
        • （5）*选择器（通配符选择器）
      • 2、包含选择器
        • （1）子代选择器
        • （2）后代选择器（空格选择器）
      • 3、属性选择器
      • 4、伪类选择器
      • 5、伪元素选择器
        • （1）::first-letter
        • （2）:first-child
        • （3） :last-child

1、基本选择器

（1）id选择器

通过标签的id名称来选择标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>#box{width: 300px;height: 300px;border: 1px solid red; }</style>
</head>
<body><div id="box"></div></body>
</html>

在这里插入图片描述

（2）类选择器

class选择器选择一个类名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>.msg{width: 200px;height: 100px;border: 1px solid green;}</style>
</head>
<body><!-- <div id="box"></div> --><div class="msg"></div><div class="msg"></div><div class="msg"></div>
</body>
</html>

在这里插入图片描述

（3）标签选择器

用标签名直接选择标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>ul{list-style: none;}</style>
</head>
<body><ol><li>国内新闻</li><li>国内新闻</li><li>国内新闻</li></ol><ul><li>国外新闻</li><li>国外新闻</li><li>国外新闻</li></ul>
</body>
</html>

在这里插入图片描述

（4）逗号选择器

是一个复合选择器

       ul,ol{list-style: none;}

在这里插入图片描述

（5）*选择器（通配符选择器）

匹配所有标签

2、包含选择器

（1）子代选择器

用 > 表示父子关系

 ul.news > li {height: 50px;width: 400;border: 1px solid red;}

（2）后代选择器（空格选择器）

表示后代关系

        ul.news li {height: 50px;width: 400;border: 1px solid red;}

包含选择器的总代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>ul{list-style: none;}ul.news {/*选择中的ul*/width: 400px;border: 1px solid red;min-height: 50px;}ul.news > li {height: 50px;width: 400;border: 1px solid red;}ul.news li {height: 50px;width: 400;border: 1px solid red;}</style>
</head>
<body><div class="news"></div><ul class="news"><li>这是列表1</li><li>这是列表2</li><li>这是列表3</li><li>这是列表4</li><li>这是列表5</li><li>这是列表6</li><li>这是列表7</li><li>这是列表8</li><ul><li>这是列表8</li><li>这是列表9</li><li>这是列表10</li></ul></ul>
</body></html>

3、属性选择器

 <style>[title]{/*将有title属性的颜色改为红色*/color: red;}</style>

        div[title] {color: red;}
/*将div标签里面的title属性的内容颜色改为红色*/

总代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* [title]{color: red;} */div[title] {color: red;}</style>
</head><body><div title="标题">这是一个div</div><div>这是一个div</div><div id="box">这是一个div</div><div>这是一个div</div><div>这是一个div</div><p title>这是有title的</p><p>这是没有title的</p>
</body></html>

在这里插入图片描述

4、伪类选择器

<style>.content{color: red;}a:link{/*未访问连接*/color: #333;text-decoration: none;/* 没有下划线 */}a:hover{/*鼠标移动到链接上*/color:mediumvioletred ;text-decoration: underline;}a:active{/*选中的链接被激活*/color: green;}a:visited{/*已访问的链接*/color: slateblue;}</style>

总代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content{color: red;}a:link{color: #333;text-decoration: none;/* 没有下划线 */}a:hover{color:mediumvioletred ;text-decoration: underline;}a:active{color: green;}a:visited{color: slateblue;}</style>
</head>
<body><div class="content"><p>近日大学生返校高峰期</p><p>近日大学生返校高峰期</p><p>近日大学生返校高峰期</p><a href="#">连接1</a><a href="#">连接2</a><a href="#">连接3</a><a href="#">连接4</a><a href="#">连接5</a></div>
</body>
</html>

5、伪元素选择器

（1）::first-letter

 p::first-letter{/* 选择中一段的第一个单词 */text-transform: uppercase;/* 大写 */}

（2）:first-child

        ul.news > li:first-child{/*选中ul标签下，news类的li标签的第一个color: green ;}

（3） :last-child

 ul.news > li:last-child{color:blue ;}

总代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>p::first-letter{/* 选择中一段的第一个单词 */text-transform: uppercase;/* 大写 */}::first-line{/* 选中第一行 */color: red;}ul.news > li:first-child{color: green ;}ul.news > li:last-child{color:blue ;}</style>
</head>
<body><p>this is a book!!!<ul class="news"><li>这都是列表1</li><li>这都是列表2</li><li>这都是列表3</li><li>这都是列表4</li><li>这都是列表5</li></ul></p><p>this is a book!!!</p><p>石家庄伊能静 不是大家都说的就是真的吴刚回应整容风波颖儿手滑点赞付辛博井柏然相关微博俄罗斯李秀满 我的心好痛经纪人改口否认刘文正死讯王诗龄好瘦景甜方声明北京多个地铁口有人扫码送大鹅他和女友就要结婚了，竟没有一张合影男生买8个小笼包6个都没馅，当事人：开始只是以为皮很厚中国神秘千年古树，中间竟藏着一“小孩”，专家至今都无法解释香港教育局：将成立一所提供内地课程的学校国外一女子养了条彪悍的“宠物”，给它穿粉嫩公主服，还做美甲价值190万的主板被盗！民警迅速找回外媒：美国家安全委员会中国事务主任将离职，"与气球事件无关"穿着毛茸茸外套在草地里爬！玻利维亚一囚犯装扮成羊越狱失败英媒：为什么家里乱一点对你挺好？继拜登后哈里斯也在情人节发图"秀恩爱"，网友发现图中"第三者"</p>
</body>
</html>

最后这段文字是我在网上随表找的新闻。

相关文章：

css选择器

目录1、基本选择器&#xff08;1&#xff09;id选择器&#xff08;2&#xff09;类选择器&#xff08;3&#xff09;标签选择器&#xff08;4&#xff09;逗号选择器&#xff08;5&#xff09;*选择器&#xff08;通配符选择器&#xff09;2、包含选择器&#xff08;1&#xff…...

编程日记 2023/2/17 9:17:59

MyBatis详解2——增删改查操作

一、SpringBoot单元测试 1.1什么是单元测试 单元测试是指对软件中的最小测试单元进行检查和验证的过程。 执行单元测试就是为了证明某段代码的执行结果是否符合我们的预期。如果测试通过则是符合预期&#xff0c;否则测试失败。 1.2单元测试的好处 1.单元测试不用启动Tomca…...

编程日记 2023/2/17 9:16:49

最大连续子列和

给定一个数组&#xff0c;求它的最大连续子列和。这个问题有四种解法。 1、暴力循环(O(n^3))分析这个问题&#xff0c;既然是子列&#xff0c;那么它最长为n&#xff0c;最短为1。要想求和我们一般需要知道这个子列的左端下标和右端下标&#xff0c;再求这个子列的和。最简单的…...

编程日记 2023/2/17 9:15:39

线性基 学习笔记

什么是线性基&#xff1f; 先来回顾一下向量空间中的基。这个基代表着空间的一个极大线性无关子集&#xff0c;组中向量线性无关&#xff0c;且空间中的任意一个向量都可以唯一地由基中的向量来表示 那么回到线性基&#xff0c;它其实就类似于是一个向量空间的基 我们考虑一…...

编程日记 2023/2/17 9:14:30

算法-回溯算法-组合问题

77. 组合https://leetcode.cn/problems/combinations/ 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,…...

编程日记 2023/2/17 9:13:19

ABAP中的Null值与space 以及 BW中ADSO的Key值

写出来怪丢人&#xff0c;到现在还没搞懂这个。 在BW中创建ADSO&#xff0c;定义Key字段。可以看到ADSO表的定义中&#xff0c;所有的Key和Data属性如下&#xff1a; 所有的key会有关键字key打头&#xff0c;所有字段都有not null. 但是并不是有个字段是blank空的就不能更新进…...

编程日记 2023/2/17 9:10:59

JavaScript库之Lodash常用方法

Lodash 中文文档https://www.lodashjs.com/docs/lodash.omit/以下总结了在项目中常用的方法&#xff0c;其他的慢慢更新语言&#xff1a;cloneDeep这个方法类似_.clone&#xff0c;除了它会递归拷贝 value。&#xff08;注&#xff1a;也叫深拷贝&#xff09;参数value (*): 要…...

编程日记 2023/2/17 9:09:51

Kotlin新手教程二（Kotlin基本数据类型及基础语法）

一、基本数据类型 1.数字 由于Kotlin支持类型推断&#xff0c;所以在使用时若超出Int的范围则会被认定为其它类型&#xff1b;若需要显式指定Long型值&#xff0c;则需要在值后添加L后缀。 2.浮点数 3.比较两个数&#xff08; 和 &#xff09; Kotlin 中没有基础数据类型&a…...

编程日记 2023/2/17 9:08:44

git idea创建新分支，获取/合并主支代码的2个方法

其他sql格式也在更新中&#xff0c;可直接查看这个系列&#xff0c;要是没有你需要的格式&#xff0c;可在评论或私信我 个人目录 获取主支代码的2个方法1&#xff0c;创建一个分支&#xff0c;获取主支的所有代码&#xff08;场景&#xff1a;我需要一个自己的分支进行编写模…...

编程日记 2023/2/17 9:07:35

CF1714A Everyone Loves to Sleep 题解

CF1714A Everyone Loves to Sleep 题解题目链接字面描述题面翻译题目描述输入格式输出格式样例解释题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1代码实现题目 链接 https://www.luogu.com.cn/problem/CF1714A 字面描述 题面翻译 题目描述 Vlad和其他人一样&am…...

编程日记 2023/2/17 9:06:27

oracle官方下载历史版本JDK版本

背景 日常工作中由于一些特殊原因&#xff0c;我们需要下载指定系统指定位数指定版本的jdk&#xff0c;这个时候去网上搜索下载就会遇到各种坑&#xff0c;病毒、诱导连接、诱导关注/注册、付费、错误版本等&#xff0c;所以最好的办法是去官网下载&#xff0c;下面列举两种方式…...

编程日记 2023/2/17 9:05:16

双击-jar包无法运行解决方法

我自己是通过探索出来的方法解决的&#xff0c;网上的方法适合普通问题 网络流传方法 那种-jar和run.bat的就是曲解了问题意思&#xff0c;问题不是如何运行&#xff0c;而是如何双击jar包就可以直接运行。 普通小问题就是修改注册表&#xff0c;将java路径写进去后面加个 %1…...

编程日记 2023/2/17 9:04:06

程序员的自我修养第七章——动态链接 (下)

接上一篇。 7.3 地址无关代码 对于现代机器来说&#xff0c;引入地址无关代码并不麻烦&#xff0c;我们展示下各种模型的地址引用方式&#xff1a; 1. 模块内部函数调用 2. 模块内部的数据访问&#xff0c;如全局变量、静态变量。 3. 模块外部的函数调用&#xff0c;跳转。 4.…...

编程日记 2023/2/17 9:02:55

蓝桥杯刷题——基础篇（二）

这部分题目&#xff0c;主要面向有志参加ACM与蓝桥杯竞赛的同学而准备的&#xff0c;蓝桥杯与ACM考察内容甚至评测标准基本都一样&#xff0c;因此本训练计划提供完整的刷题顺序&#xff0c;循序渐进&#xff0c;提高代码量&#xff0c;巩固基础。因竞赛支持C语言、C、Java甚至…...

编程日记 2023/2/17 9:00:40

PTA L1-049 天梯赛座位分配（详解）

前言&#xff1a;内容包括&#xff1a;题目&#xff0c;代码实现&#xff0c;大致思路&#xff0c;代码解读 题目&#xff1a; 天梯赛每年有大量参赛队员&#xff0c;要保证同一所学校的所有队员都不能相邻&#xff0c;分配座位就成为一件比较麻烦的事情。为此我们制定如下策…...

编程日记 2023/2/17 8:59:32

Linux部分参数作用讲解

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的绽放&#xff0…...

编程日记 2023/2/17 8:58:24

Java kafka

JAVA面试题--Kafka&#xff08;最新最全&#xff09; 目录概述需求&#xff1a;设计思路实现思路分析1.URL管理2.网页下载器3.爬虫调度器4.网页解析器5.数据处理器拓展实现性能参数测试&#xff1a;参考资料和推荐阅读)Survive by day and develop by night. talk for import b…...

编程日记 2023/2/17 8:57:18

DBA之路---Stream数据共享同步机制与配置方法

oracle的Stream解析–数据共享 在g版本常用&#xff0c;如果是c版本项目一般都会选择goldengate&#xff0c;比stream靠谱多了 Oracle中的stream是消息队列一种应用形式&#xff0c;原理如下&#xff1a; 收集oracle中的事件&#xff0c;将事件保存在队列里&#xff0c;然后将…...

编程日记 2023/2/17 8:56:08

CF1790E Vlad and a Pair of Numbers 题解

CF1790E Vlad and a Pair of Numbers 题解题目链接字面描述题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1思路代码实现题目 链接 https://www.luogu.com.cn/problem/CF1790E 字面描述 题面翻译 共有 ttt 组数据。 每组数据你会得到一个正整数 xxx&…...

编程日记 2023/2/17 8:55:00

漏洞预警|Apache Kafka Connect JNDI注入漏洞

棱镜七彩安全预警 近日网上有关于开源项目Apache Kafka Connect JNDI注入漏洞&#xff0c;棱镜七彩威胁情报团队第一时间探测到&#xff0c;经分析研判&#xff0c;向全社会发起开源漏洞预警公告&#xff0c;提醒相关安全团队及时响应。 项目介绍 Karaf是Apache旗下的一个开…...

编程日记 2023/2/17 8:53:49

企业小程序开发步骤【教你创建小程序】

随着移动互联网的兴起&#xff0c;微信已经成为了很多企业和商家必备的平台&#xff0c;而其中&#xff0c;微信小程序是一个非常重要的工具。本文将为大家介绍小程序开发步骤&#xff0c;教你创建小程序。 步骤一、注册小程序账号 先准备一个小程序账号&#xff0c;在微信公…...

编程日记 2023/2/17 8:52:39

刚性电路板的特点及与柔性电路板的区别

打开市场上的任何一个电子产品&#xff0c;会发现里面都有一块或多块电路板。电路板是电子产品运行的核心&#xff0c;之前沐渥小编已经给大家介绍了柔性电路板&#xff0c;下面给大家介绍刚性电路板的基础知识。 刚性电路板俗称硬板&#xff0c;是由不容易变形的刚性基材制成的…...

编程日记 2023/2/17 8:51:32

扫码过磅+车牌识别，内蒙古蒙维过磅实现信息化管理

扫码过磅、车牌识别、对接SAP ERP系统设计思路&#xff1a; 无人值守系统升级改造包括车牌自动识别系统、信息化&#xff08;扫码等方式&#xff09;管理系统、智能自动控制系统等实现信息无纸化传递。远程监管地点设于公司东磅房&#xff0c;可以实现远程监测监控画面、称重过…...

编程日记 2023/2/17 8:50:21

蒙特卡洛计算圆周率

使用MC计算圆周率的小例子&#xff0c;使用python的numpy&#xff0c;matplotlib库import numpy as npimport matplotlib.pyplot as pltdef mc_calculate_pi(t):np.random.seed(t)rand_num np.random.rand(t)rand_num2 np.random.rand(t)l1 rand_num-0.5l2 rand_num2-0.5l0…...

编程日记 2023/2/17 8:49:12

生物信息场景下的用户需求

背景分析概念定义基因测序是一种新型基因检测技术&#xff0c;是基因检测的方法之一&#xff0c;其又叫基因谱测序&#xff0c;是国际上公认的一种基因检测标准。基因测序技术能锁定病变基因&#xff0c;提前预防和治疗。过长的测序周期以及上万美元的仪器成本&#xff0c;成了…...

编程日记 2023/2/17 8:48:03

linux su（switch user）和sudo（superuser do）的区别？（sudo su与su的区别）

文章目录linux su&#xff08;switch user&#xff09;和sudo&#xff08;superuser do&#xff09;的区别&#xff1f;sudo su与su的区别linux su&#xff08;switch user&#xff09;和sudo&#xff08;superuser do&#xff09;的区别&#xff1f; 在Unix或Linux操作系统中…...

编程日记 2023/2/17 8:46:55

PostgreSQL的学习心得和知识总结（一百二十三）|深入理解PostgreSQL数据库开源扩展pg_dirtyread的使用场景和实现原理

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…...

编程日记 2023/2/17 8:45:45

ubuntu清理挖矿病毒

0 序言 我之前搭建的hadoop用于测试&#xff0c;直接使用了8088和9870端口&#xff0c;没有放入docker&#xff0c;从而没有端口映射。于是&#xff0c;就被不法之徒盯上了&#xff0c;hadoop被提交了很多job&#xff0c;使得系统被感染了挖矿病毒&#xff0c;在前几天阿里云站…...

编程日记 2023/2/17 8:44:36

【代码随想录训练营】【Day16】第六章｜二叉树｜104.二叉树的最大深度｜559.n叉树的最大深度｜111.二叉树的最小深度｜222.完全二叉树的节点个数

二叉树的最大深度 题目详细&#xff1a;LeetCode.104 递归法很容易理解&#xff1a; 定义一个全局变量max&#xff0c; 记录二叉树的最大深度在递归函数中增加一个深度参数&#xff0c;表示当前的节点的深度然后对二叉树进行深度优先遍历当遍历到叶子节点时&#xff0c;比较…...

编程日记 2023/2/17 8:43:28

transformer总结

1.注意力机制 意义&#xff1a;人类的注意力机制极大提高了信息处理的效率和准确性。 公式&#xff1a; 1)自注意力机制 b都是在考虑了所有a的情况下生成的。 以产生b1向量为例&#xff1a; 1.在a这个序列中&#xff0c;找到与a1相关的其他向量 2.每个向量与a1关联的程度&a…...

编程日记 2023/2/17 8:42:20

vivo官方网站进入/深圳网络营销

1.效果图 2.定制的属性 textColor 字体颜色textSize 字体大小duration 文字显示出来的时间3.使用说明 implementation wellijohn.org.tvanim:animtv:1.0.0 <wellijohn.org.animtv.AnimTextViewandroid:id"id/atv"android:layout_width"wrap_content"and…...

编程日记 2025/1/27 23:12:55

网站做不下去/sem推广

1、登陆微信公众平台后&#xff0c;点击小程序&#xff0c;进入小程序开发&#xff0c;找到下面的工具&#xff0c;点击进去微信开发者工具2、点击下载微信小程序开发工具3、点击安装&#xff0c;根据自己的需要安装在那一个盘&#xff08;我安装在D盘&#xff09;4、安装完成之…...

编程日记 2025/1/27 22:44:37

移动版网站建设/百度软件市场

不使用-r8参数&#xff0c;运行到现在还在算。看来应该没问题的。T, dt 1.0546666E-12 1.3333332E-167910 Ex, Ez, Ey at source loc 345006.6 8.380198-176013.27910 MAX Hx 7105319. -6546696.7910 MAX Hz 151846.2 -151846.17910 MAX Hy 160…...

编程日记 2025/1/27 22:21:17

网站地图插件/在百度上怎么打广告

查看数据库中的含long字段的表&#xff1a; SQL> select table_name from dba_tab_columns where data_typeLONG and ownerPHSI;TABLE_NAME --------------- PLAN_TABLE QUEST_SL_TEMP_E XPLAIN1SMP_LONG_TEXT SMP_LONG_TEXT_用expdp通过network_link导出PHSI下的所有对象&a…...

编程日记 2025/1/27 20:14:20

psd设计网站模板/今天的最新消息新闻

僵尸进程&#xff1a;会占用系统进程PID号&#xff08;每个系统PID数量都是有限的&#xff09;　　　　　一个进程任务执行完就死亡了 但是操作系统不会立即将其清理 为的是 开启这个子进程的父进程可以访问到这个子进程的信息　　　　　　这样的 任务完成的 但是没有被操作系…...

编程日记 2025/1/27 20:09:51

单页面网站入侵/网站排名优化软件

>>>Spring框架完整视频教程<<<>>> 学习交流群 < < <【Spring框架】一、框架引入1. 问题目前我们实现一个功能的基本流程如下:创建一个web项目创建数据库使用jsp技术完成页面的创建使用ServletMVCMybatis完成功能开发。代码的执行流程如下:…...

编程日记 2025/1/27 18:06:34