html css样式选择器介绍

目录

  • 一、单标签选择器
  • 二、多标签选择器
  • 三、类选择器
  • 四、标签结合类选择器
  • 五、多个标签结合类选择器
  • 六、子标签选择器
  • 七、所有子标签选择器
  • 八、相邻选择器
  • 九、多种选择器混合使用
  • 十、超链接样式选择器

一、单标签选择器

下面的 css 会将所有 h1 标签里的文字设置为红色

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>h1 {color: red;}</style></head><body><h1>我是第一个一级标题</h1><h1>我是第二个一级标题</h1><p>这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li>项目 2</li><li>项目 <em></em></li></ul></body>
</html>

二、多标签选择器

多个标签如果使用一样的 css,可以用逗号分割。
下面的 css 会将所有 h1 和 li 标签里的文字设置为红色

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>h1,li {color: red;}</style></head><body><h1>我是第一个一级标题</h1><h1>我是第二个一级标题</h1><p>这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li>项目 2</li><li>项目 <em></em></li></ul></body>
</html>

三、类选择器

下面的 css 会选择所有使用了 special 类的标签将其中的文字设置为橙色并加粗

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>.special {color: orange;font-weight: bold;}</style></head><body><h1>我是第一个一级标题</h1><h1 class="special">我是第二个一级标题</h1><p class="special">这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li class="special">项目 2</li><li>项目 <em></em></li></ul></body>
</html>

四、标签结合类选择器

下面的 css 会选择所有使用了 special 类的 li 标签并将其中的文字设置为橙色并加粗

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>li.special {color: orange;font-weight: bold;}</style></head><body><h1>我是第一个一级标题</h1><h1 class="special">我是第二个一级标题</h1><p class="special">这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li class="special">项目 2</li><li>项目 <em></em></li></ul></body>
</html>

五、多个标签结合类选择器

多个标签结合类选择器,如果使用一样的 css,可以用逗号分割。
下面的 css 会选择所有使用了 special 类的 li 标签以及 使用了 special 类的 p 标签,并将其中的文字设置为橙色并加粗

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>li.special,p.special {color: orange;font-weight: bold;}</style></head><body><h1>我是第一个一级标题</h1><h1 class="special">我是第二个一级标题</h1><p class="special">这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li class="special">项目 2</li><li>项目 <em></em></li></ul></body>
</html>

六、子标签选择器

使用空格来表示选择某个标签下第一层级的第一个另一个标签,相当于选择某个标签下第一层级的第一个子标签。下面的 css 选择所有嵌套在 p 标签下 em 标签内的文字,并将其中的文字设置为橙色并加粗。

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>p em {color: orange;font-weight: bold;}</style></head><body><h1>我是第一个一级标题</h1><h1 >我是第二个一级标题</h1><p >这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><p>这是第三段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li >项目 2</li><li>项目 <em></em></li></ul></body>
</html>

七、所有子标签选择器

和上面的子标签选择器相似,所有子标签选择器是使用大于符号,表示选择某个标签下第一层级的所有另一个标签。下面的 css 选择所有嵌套在 ul 标签下 li 标签内的文字,并将其中的文字设置为红色。

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>ul > li {color: red;}</style></head><body><ul><li>项目 1</li><li >项目 2</li><li>项目 <em></em></li><ol><li>Item 1</li><li>Item 2</li></ol></ul></body>
</html>

八、相邻选择器

使用加号可以选择某个标签元素后的第一个另一个元素。下面的 css 会选择 h1 后和它同层级的第一个 p 标签,并将其中的文字设置为橙色并加粗。

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>开始学习 CSS</title><style>h1 + p {color: orange;font-weight: bold;}</style></head><body><h1>我是第一个一级标题<p>这是段落文本。 包含了一个<span>span</span> 元素。</p></h1><p>这是一个段落文本。 包含了一个<span>span</span> 元素。</p><p>这是第二段。包含了一个 <em>强调</em> 元素。</p><ul><li>项目 1</li><li >项目 2</li><li>项目 <em></em></li></ul></body>
</html>

九、多种选择器混合使用

下面的 css 选择器是一个混合的选择器。
对于 body h1 + p .special 指的是选择 body 标签下第一层的所有 h1 标签,再选择该 h1 标签后第一个相邻的 p 标签,再选择该 p标签内带有 special 类的标签;

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><style>    body h1 + p .special , .lispecial {color: yellow;background-color: black;}</style></head><body><h1>我是第一个一级标题</h1><p>第一段文字<span class="special">aaa</span></p><p>第二段文字<span class="special">bbb</span></p><h1 >我是第二个一级标题</h1><p>第三段文字<span class="special">ccc</span></p><ul><li>项目一</li><li class="lispecial">项目二</li><li>项目 <em></em></li></ul><p class="special">fhyjytu</p></body></html>

十、超链接样式选择器

对于 a 标签,可以设置正常样式、鼠标悬停、鼠标点击时,点击后的样式。

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><style> /*link:链接正常的样式;*/   a:link {color: pink;}/*鼠标悬停的样式*/a:hover {color:red;text-decoration: none;}/*鼠标点击的样式*/a:active{color:rgb(241, 30, 153);background-color:blue;text-align:center;text-decoration: none;}/*链接访问过的样式*/a:visited {color: green;}</style></head><body><h1>我是第一个一级标题</h1><p>第一段文字<a href="http://example.com" target="_blank">link</a></p></body></html>

参考:
让我们开始 CSS 的学习之旅
CSS 选择器
类型、类和 ID 选择器
属性选择器
伪类和伪元素
关系选择器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/203400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FPGA图像处理实战】- 图像处理前景如何?就业前景如何?

图像处理是FPGA应用的主要领域之一&#xff0c;图像处理数据量特别大且对实时性处理要求高的场景&#xff0c;这恰好能发挥FPGA流水线可实时处理的优势。 那么FPGA图像处理的前景如何&#xff1f; 一、FPGA开发&#xff08;图像处理&#xff09;招聘就业情况 看FPGA图像处理…

c++ memset

memset 函数是 C/C 中的一个函数&#xff0c;用于将一块内存的内容设置为指定的值。在 C 中&#xff0c;你可以使用 #include 头文件来包含 memset 函数的声明。 以下是 memset 函数的基本语法&#xff1a; cpp #include void *memset(void *ptr, int value, size_t num); …

五花八门客户问题(BUG) - 重复打印

根据commit猜测客户问题 git://sourceware.org / glibc.git / commitcommitsummary | shortlog | log | commit | commitdiff | tree (parent: 4573c6b) | patch Dont flush write buffer for ftell author Siddhesh Poyarekar <siddheshredhat.com> Fri, 28 Sep 2012 …

ELK 日志解决方案

ELK 是目前最流行的集中式日志解决方案&#xff0c;提供了对日志收集、存储、展示等一站式的解决方案。 ELK 分别指 Elasticsearch、Logstash、Kibana。 Elasticsearch&#xff1a;分布式数据搜索引擎&#xff0c;基于 Apache Lucene 实现&#xff0c;可集群&#xff0c;提供…

B 站基于 StarRocks 构建大数据元仓

作者&#xff1a;bilibili 大数据高级开发工程师 杨洋 B站大数据元仓是一款用来观测大数据引擎运行情况、推动大作业治理的系统诊断产品。经过调研和性能测试&#xff0c;大数据元仓最终以 StarRocks 为技术底座&#xff0c;从实际的应用效果来看&#xff0c;大部分查询都能在几…

mvn site 命令

概述 在Maven中&#xff0c;site指的是一个特定的阶段&#xff0c;其目的是生成项目相关的站点文档。这些站点文档可以为项目的开发者、用户、以及其他利益相关者提供有关项目的详细信息。 Maven的站点文档通常包括以下内容&#xff1a; 项目信息&#xff1a;这部分提供了关于…

Mysql大数据量删除

Mysql大数据量删除 在一些操作中&#xff0c;可能需要清理一下积压的数据&#xff0c;如果数据量小的话自然没有问题&#xff0c;但是如果是个大数据量的问题&#xff0c;那么就该考虑一个合适的办法了。 在清理大数据量的时候需要考虑是清理部分数据还是清理所有数据&#xf…

【微服务】分布式限流如何实现

Sentinel 是一款阿里巴巴开源的分布式系统级流量控制组件&#xff0c;它提供了流量的自适应控制、熔断降级、系统负载保护等功能。下面是使用 Sentinel 实现分布式限流方案的基本步骤&#xff1a; 引入 Sentinel 依赖&#xff1a;首先在你的 Java 项目中引入 Sentinel 的相关依…

Stm32_串口的帧(不定长)数据接收

目录标题 前言1、串口中断接收固定帧头帧尾数据1.1、任务需求1.2、实现思路1.3、程序源码&#xff1a; 2、串口中断接收用定时器来判断帧结束3、串口中断接收数据空闲中断3.1、串口的空闲中断3.2、实现思路3.3、程序源码 4、串口的空闲中断DMA转运4.1、DMA简介4.2、DMA模式4.3、…

AHB 与 DMA

AHB&#xff08;先进高性能总线&#xff09; 随着深亚微米工艺技术日益成熟&#xff0c;集成电路芯片的规模越来越大。数字IC从基于时序驱动的设计方法&#xff0c;发展到基于IP核复用的设计方法&#xff0c;并在SOC设计中得到了广泛应用。在基于IP核复用的SoC&#xff08;Syst…

【BME2112】w11 notes

下周做老鼠实验 group analysis SPM group analysis 数据地址resting state 可以分析&#xff1a;correlation 计算两个脑区的相关性 静息态实验简单functional 成功的实验能看到激活区不成功的实验&#xff1a;比如被试头动太大&#xff0c;不是健康的被试 Spontaneous brain…

ThreeJs中使用Cannon实现方块自由落体效果

之前有做过小球的掉落效果&#xff0c;不过那个从画面上只能看出来重力加速度和接触地面反弹的效果&#xff0c;可能没有那么直观&#xff0c;也许用一些js加物理公式也能实现类似的效果&#xff0c;这节用小方块来演示&#xff0c;可以很直观的看出物理世界的现象&#xff0c;…

ALPHA开发板烧录工具MfgTool烧写方法

一. 简介 MfgTool 工具是 NXP 提供的专门用于给 I.MX 系列 CPU 烧写系统的软件&#xff0c;可以在 NXP 官网下载到。运行在windows下。可以烧写uboot.imx、zImage、dtb&#xff0c;rootfs。通过 USB口进行烧写。 上一篇文章简单了解了 ALPHA开发板烧录工具MfgTool。文章地址…

数据结构之交换排序

目录 交换排序 冒泡排序 冒泡排序的时间复杂度 快速排序 快速排序单趟排序的时间复杂度 快速排序的时间复杂度 交换排序 在日常生活中交换排序的使用场景是很多的&#xff0c;比如在学校做早操&#xff0c;老师通常会让学生按大小个排队&#xff0c;如果此时来了一个新学…

MySQL系列(一):索引篇

为什么是B树&#xff1f; 我们推导下&#xff0c;首先看下用哈希表做索引&#xff0c;是否可以满足需求。如果我们用哈希建了索引&#xff0c;那么对于如下这种SQL&#xff0c;通过哈希&#xff0c;可以快速检索出数据&#xff1a; select * from t_user_info where id1;但是这…

ThreadX开源助力Microsoft扩大应用范围:对比亚马逊AWS的策略差异

全球超过120亿台设备正在运行ThreadX&#xff0c;这是一款专为资源受限环境设计的实时操作系统。该操作系统在微控制器和小型处理器上表现出色&#xff0c;以极高的可靠性和精确的时间控制处理任务而闻名。 ThreadX曾是英特尔芯片管理引擎的引擎&#xff0c;并且是控制Raspber…

JavaScript 宿主对象

JavaScript 宿主对象 BOM window 全局对象 window对象是可以直接被访问到的每一个用var声明的变量都会自动作为window对象的属性存在 function声明的函数也会自动作为window对象的方法存在访问window对象的属性和方法可以不用写window 属性 innerWidth 获取浏览器窗口的宽度…

AWS基于x86 vs Graviton(ARM)的RDS MySQL性能对比

概述 这是一个系列。在前面&#xff0c;我们测试了阿里云经济版&#xff08;“ARM”&#xff09;与标准版的性能/价格对比&#xff1b;华为云x86规格与ARM&#xff08;鲲鹏增强&#xff09;版的性能/价格对比。现在&#xff0c;再来看看AWS的ARM版本的RDS情况 在2018年&#…

User: zhangflink is not allowed to impersonate zhangflink

使用hive2连接进行添加数据是报错&#xff1a; [08S01][1] Error while processing statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask. User: zhangflink is not allowed to impersonate zhangflink 有些文章说需要修…

配置OSS后如何将服务器已有文件上传至OSS,推荐使用ossutil使用

1.下载安装ossutil sudo -v ; curl https://gosspublic.alicdn.com/ossutil/install.sh | sudo bash2.交互式配置生成配置文件 ossutil config 根据提示分别设置配置文件路径、设置工具的语言、Endpoint、AccessKey ID、AccessKey Secret和STSToken参数&#xff0c;STSToken留…