前端（四）css选择器、css的三大特性

css选择器、css的三大特性

文章目录

  • css选择器、css的三大特性
  • 一、css介绍
  • 二、css选择器
    • 2.1 基本选择器
    • 2.2 组合选择器
    • 2.3 交集并集选择器
    • 2.4序列选择器
    • 2.5属性选择器
    • 2.6伪类选择器
    • 2.7伪元素选择器
  • 三、css三大特性
    • 3.1 继承性
    • 3.2 层叠性
    • 3.3 优先级

一、css介绍

CSS全称为Cascading Style Sheet层叠样式表，是专门用来为HTML标签添加样式的。样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等。
在没有css以前html的样式都需要在每个标签后面设置属性，这样非常的繁琐，有了scc以后只需要完成统一的样式设置就可以批量化的设置标签的样式。

css引入有四种方式：

#内行式
<p style="color:red">hello</p>#嵌入式
<head><style>p{color: red;}</style>
</head>
<body><p>hello</p>
</body>#导入式
#css文件中为p{color: red;}
<head><style>@import "css/mystyle.css";#或者@import url("css/mystyle.css");</style>
</head>
<body><p>hello</p>
</body>#外链式
#css文件中为p{color: red;}
<head><link rel="stylesheet" href="css/mystyle.css">
</head>
<body><p>hello</p>
</body>

导入式的方式存在一些问题：

  • 导入式是css2.1特有的，对于不兼容css2.1的浏览器来说就是无效的
  • 导入式会先加载页面，再加载样式，因此如果页面内容很大，可能会先出现无样式的页面，隔一段时间再出现完整的页面从而降低用户体验

在css中可以使用如下的方式进行注释：

/*这是注释*/

二、css选择器

选择器的目的是通过某种方式选中标签从而完成对标签样式的修改。

2.1 基本选择器

id选择器以#开头，p1为标签的id名。但需要注意的是id名是唯一的，标签的id名不能重复，因此id资源十分珍贵，一般留给js代码使用，css样式不推荐使用。另外id名由字母、数字、部分特殊字符组成，且不能以数字开头，更不能是html关键字如p，a，img。

<!--id选择器-->
<style>#p1{color: red;}
</style>

类选择器以.开头，p1为标签的类名。类名的命名规则和id相同，一个标签可以有多个类，例如<p class=“p1 p2”></p>。

<!--类选择器-->
<style>.p1{color: red;}
</style>

标签选择器只需直接写标签名即可。标签选择器会选择页面所有相同类型的标签，但是只有html的标签才能作为标签选择器。

<!--标签选择器-->
<style>p{color: red;}
</style>

通配符选择器可以选中页面的所有标签，需要注意的是通配符选择器使用时会遍历页面的所有标签，如果页面内容非常大，会导致效率降低的问题。

<!--通配符选择器-->
<style>*{color: red;}
</style>

2.2 组合选择器

后代选择器以空格作为间隔，空格前后可以是基本选择器的任意一种。后代选择器可以选中某个标签的所有满足要求的子标签，如下代码中后代选择器选中的是类为p1的标签中子标签为p并且子标签p中所有id为p2的子标签。

<!--后代选择器-->
<style>.p1 p #p2{color: red;}
</style>

相邻选择器以+号作为间隔，+前后可以是基本选择器的任意一种。相邻选择器的作用是选择某个标签相邻的下一个标签，如下代码中相邻选择器选中的是类为p1的标签相邻的下一个p标签。

<!--相邻选择器-->
<style>.p1+p{color: red;}
</style>

下级选择器以>作为间隔，>前后可以是基本选择器的任意一种。下级选择器可以选中某个标签下一层嵌套中满足要求的子标签，如下代码中下级选择器选中的是类为p1的标签中下一层嵌套中子标签为p并且子标签p中的下一层嵌套的所有id为p2的子标签。

<!--下级选择器-->
<style>.p1>p>#p2{color: red;}
</style>

向后选择器以作为间隔，前后可以是基本选择器的任意一种。向后选择器可以选中某标签后面所有满足要求的标签。如下代码中向后选择器选中的是类为p1的标签后面所有的p标签。

<!--向后选择器-->
<style>.p1~p{color: red;}
</style>

2.3 交集并集选择器

交集并集选择器前后同样可以为基本选择器的任意一种。
交集选择器将多个基本选择器连在一起写(不过有标签选择器的话，标签选择器要写在前面)，其功能是选中满足多个条件的标签，如下代码中交集选择器选中的是标签为p且类为p1，p2的标签。

<!--交集选择器-->
<style>p.p1.p2{color: red;}
</style>

并集选择器将多个基本选择器用,分隔写在一块，其功能是选中多个标签，如下代码中并集选择器选中的是所有p标签或者类为p1的标签或者类为p2的标签。

<!--并集选择器-->
<style>p,.p1,.p2{color: red;}
</style>

2.4序列选择器

序列选择器可以加在任何基本选择器后面作用是给基本选择器一个筛选条件。

<!--选中所有层级中第一个且为p的标签-->
p:first-child
<!--选中所有层级中最后一个且为p的标签-->
p:last-child
<!--选中所有层级中正数第n个且为p的标签-->
p:nth-child(n)
<!--选中所有层级中倒数第n个且为p的标签-->
p:nth-last-child(n)
<!--选中所有层级中的第一个p标签-->
p:first-of-type
<!--选中所有层级中的最后一个p标签-->
p:last-of-type
<!--选中所有层级中正数第n个p标签-->
p:nth-of-type(n)
<!--选中所有层级中倒数第n个p标签-->
p:nth-last-of-type(n)
<!--选中所有层级中只有一个标签且为p-->
p:only-child
<!--选中所有层级中只有一个p标签-->
:only-of-type

2.5属性选择器

属性选择器的地位相当于基本选择器，可以代替上面选择器中需要使用基本选择器的位置。
属性选择器会把属性中的内容作为字符串对其进行匹配，=表示完全匹配，*表示含有，^表示以其开头，$表示以其结尾。

<!--选中含有class属性的标签-->
[class]
<!--选中class中完全匹配为p1的标签-->
[class="p1"]
<!--选中class中含有p1字符的标签-->
[class*="p1"]
<!--选中class中以p1字符开头的标签-->
[class^="p1"]
<!--选中class中以p1字符结尾的标签-->
[class$="p1"]
<!--选中a标签且a标签中的href属性以https字符开头，这本质是a的标签选择器和属性选择器经过交集选择器拼接在了一起-->
a[href^="https"]

2.6伪类选择器

<!--a标签初始状态文字颜色为红色-->
a:link{color: red;}
<!--a标签被访问过后文字颜色为蓝色-->
a:visited {color: blue;}
<!--鼠标悬停a标签上时背景颜色为绿色-->
a:hover {background-color:green;}
<!--鼠标点击a标签时文字颜色为黄色-->
a:active {color: yellow;}
<!--input文本框聚集时框线消失，背景颜色为粉色-->
input:focus{outline: none;background-color:pink;}

a标签的伪类选择器可以单独出现，也可以一起出现，一起出现时有严格的顺序要求：link，visited，hover，active。
hover是所有其他标签都可以使用的，focus只给input标签使用。

2.7伪元素选择器

<!--选中p标签的首个字母，常用于杂志类文字首字母的调节大小-->
p:first-letter {font-size: 48px;}
<!--p标签内容前面插入新内容，且文本颜色为红色-->
p:before {content: "*";color: red;}
<!--p标签内容后面插入新内容，且文本颜色为红色-->
p:after {content: "?";color: red;}

选择器的组合使用示例：p .p1:first-child~#qq:last-child,div+[class]:last-child p[class$=qq]

三、css三大特性

3.1 继承性

继承性指子标签可以继承父标签的样式，但是只有以color、font-、text-、line-开头的属性才可以继承，a标签的文字颜色和下划线是不能继承别人的，h标签的文字大小是不能继承别人的，如果继承则会在原来字体大小的基础上变大。

3.2 层叠性

层叠性是指如果多个选择器选中了同一个标签且设置的属性产生冲突时会有覆盖效果。例如打开浏览器开发者面板时会看到有效属性被划掉了。

3.3 优先级

当多个选择器选中同一标签且设置的属性产生冲突时，就会涉及到优先级的问题了。
优先级遵守以下的规则：

  • 行内式>嵌入式和外部式(引入css文件的样式)。
  • 直接选中 > 间接选中(即继承而来的)。
  • 如果都是间接选中，那么谁离目标标签比较近，就用谁的。
  • 如果都是直接选中，并且都是同类型的选择器，那么谁写的在后面就用谁的。
  • 如果都是直接选中，并且是不同类型的选择器，那么id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）。
  • 如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级：id数多的优先级高；id数相同，则判定类数多的优先级高；id数、class数均相同，则判定标签数多的优先级高；若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高。

另外可以通过important将优先级提升到最高，但是这种方法容易产生代码难以维护的问题。

.p1{color:red !important;}

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

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

相关文章

《探索视频数字人：开启未来视界的钥匙》

《探索视频数字人：开启未来视界的钥匙》

一、引言 1.1视频数字人技术的崛起 在当今科技飞速发展的时代&#xff0c;视频数字人技术如一颗璀璨的新星&#xff0c;正逐渐成为各领域瞩目的焦点。它的出现&#xff0c;犹如一场科技风暴&#xff0c;彻底改变了传统的视频制作方式&#xff0c;为各个行业带来了前所未有的机…
阅读更多...
【ETCD】[源码阅读]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法

【ETCD】[源码阅读]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法

在分布式系统中&#xff0c;etcd 的一致性与高效性得益于其强大的 Raft 协议模块。而 processInternalRaftRequestOnce 是 etcd 服务器处理内部 Raft 请求的核心方法之一。本文将从源码角度解析这个方法的逻辑流程&#xff0c;帮助读者更好地理解 etcd 的内部实现。 方法源码 …
阅读更多...
免费下载 | 2024算网融合技术与产业白皮书

免费下载 | 2024算网融合技术与产业白皮书

《2024算网融合技术与产业白皮书&#xff08;2023年&#xff09;》的核心内容概括如下&#xff1a; 算网融合发展概述&#xff1a; 各国细化算网战略&#xff0c;指引行业应用创新升级。 算网融合市场快速增长&#xff0c;算力互联成为投资新热点。 算网融合产业模式逐渐成型…
阅读更多...
基于卷积神经网络的图像二分类检测模型训练与推理实现教程 | 幽络源

基于卷积神经网络的图像二分类检测模型训练与推理实现教程 | 幽络源

前言 对于本教程&#xff0c;说白了&#xff0c;就是期望能通过一个程序判断一张图片是否为某个物体&#xff0c;或者说判断一张图片是否为某个缺陷。因为本教程是针对二分类问题&#xff0c;因此主要处理 是 与 不是 的问题&#xff0c;比如我的模型是判断一张图片是否为苹果…
阅读更多...
安全见闻全解析

安全见闻全解析

跟随 泷羽sec团队学习 声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及…
阅读更多...
代码随想录-算法训练营-番外(图论02:岛屿数量,岛屿的最大面积)

代码随想录-算法训练营-番外(图论02:岛屿数量,岛屿的最大面积)

day02 图论part02 今日任务:岛屿数量,岛屿的最大面积 都是一个模子套出来的 https://programmercarl.com/kamacoder/0099.岛屿的数量深搜.html#思路往日任务: day01 图论part01 今日任务:图论理论基础/所有可到达的路径 代码随想录图论视频部分还没更新 https://programmercar…
阅读更多...
RabbitMQ个人理解与基本使用

RabbitMQ个人理解与基本使用

目录 一. 作用&#xff1a; 二. RabbitMQ的5中队列模式&#xff1a; 1. 简单模式 2. Work模式 3. 发布/订阅模式 4. 路由模式 5. 主题模式 三. 消息持久化&#xff1a; 消息过期时间 ACK应答 四. 同步接收和异步接收&#xff1a; 应用场景 五. 基本使用 &#xff…
阅读更多...
前端怎么预览pdf

前端怎么预览pdf

1.背景 后台返回了一个在线的pdf地址&#xff0c;需要我这边去做一个pdf的预览&#xff08;需求1&#xff09;&#xff0c;并且支持配置是否可以下载&#xff08;需求2&#xff09;&#xff0c;需要在当前页就能预览&#xff08;需求3&#xff09;。之前我写过一篇预览pdf的文…
阅读更多...
Python 参数配置使用 XML 文件的教程：轻松管理你的项目配置

Python 参数配置使用 XML 文件的教程：轻松管理你的项目配置

Python 参数配置使用 XML 文件的教程&#xff1a;轻松管理你的项目配置 一句话总结&#xff1a;当配置项存储在外部文件&#xff08;如 XML、JSON&#xff09;时&#xff0c;修改配置无需重新编译和发布代码。通过更新 XML 文件即可调整参数&#xff0c;无需更改源代码&#xf…
阅读更多...
解决 MySQL 启动失败与大小写问题，重置数据库

解决 MySQL 启动失败与大小写问题，重置数据库

技术文档&#xff1a;解决 MySQL 启动失败与大小写问题&#xff0c;重置数据库 1. 问题背景 在使用 MySQL 时&#xff0c;可能遇到以下问题&#xff1a; MySQL 启动失败&#xff0c;日志显示 “permission denied” 或 “Can’t create directory” 错误。MySQL 在修改配置文…
阅读更多...
python webdriver-manager 实现selenium 免下载安装webdriver

python webdriver-manager 实现selenium 免下载安装webdriver

python webdriver-manager 实现selenium 免下载安装webdriver selenium在自动化测试中，通常需要使用浏览器驱动来与浏览器进行交互。然而，手动下载、安装、以及管理这些驱动非常麻烦，尤其是当驱动版本频繁更新时。为此，webdriver-manager库提供了一个极简的方案，自动帮我…
阅读更多...
滑动窗口算法专题

滑动窗口算法专题

滑动窗口简介 滑动窗口就是利用单调性&#xff0c;配合同向双指针来优化暴力枚举的一种算法。 该算法主要有四个步骤 1. 先进进窗口 2. 判断条件&#xff0c;后续根据条件来判断是出窗口还是进窗口 3. 出窗口 4.更新结果&#xff0c;更新结果这个步骤是不确定的&#xff0c…
阅读更多...
C# 中的Task

C# 中的Task

文章目录 前言一、Task 的基本概念二、创建 Task使用异步方法使用 Task.Run 方法 三、等待 Task 完成使用 await 关键字使用 Task.Wait 方法 四、处理 Task 的异常使用 try-catch 块使用 Task.Exception 属性 五、Task 的延续使用 ContinueWith 方法使用 await 关键字和异步方法…
阅读更多...
【AIGC】如何高效使用ChatGPT挖掘AI最大潜能？26个Prompt提问秘诀帮你提升300%效率的！

【AIGC】如何高效使用ChatGPT挖掘AI最大潜能？26个Prompt提问秘诀帮你提升300%效率的！

还记得第一次使用ChatGPT时&#xff0c;那种既兴奋又困惑的心情吗&#xff1f;我是从一个对AI一知半解的普通用户&#xff0c;逐步成长为现在的“ChatGPT大神”。这一过程并非一蹴而就&#xff0c;而是通过不断的探索和实践&#xff0c;掌握了一系列高效使用的技巧。今天&#…
阅读更多...
浩辰CAD教程004：柱梁板

浩辰CAD教程004：柱梁板

文章目录 柱梁板标准柱角柱构造柱柱齐墙边绘制梁绘制楼板 柱梁板 标准柱 绘制标准柱&#xff1a; ①&#xff1a;点选插入柱子②&#xff1a;沿着一根轴线布置柱子③&#xff1a;指定的矩形区域内的轴线交点插入柱子 替换现有柱子&#xff1a;选择替换之后的柱子形状&#x…
阅读更多...
UNIX数据恢复—UNIX系统常见故障问题和数据恢复方案

UNIX数据恢复—UNIX系统常见故障问题和数据恢复方案

UNIX系统常见故障表现&#xff1a; 1、存储结构出错&#xff1b; 2、数据删除&#xff1b; 3、文件系统格式化&#xff1b; 4、其他原因数据丢失。 UNIX系统常见故障解决方案&#xff1a; 1、检测UNIX系统故障涉及的设备是否存在硬件故障&#xff0c;如果存在硬件故障&#xf…
阅读更多...
桥接模式的理解和实践

桥接模式的理解和实践

桥接模式&#xff08;Bridge Pattern&#xff09;&#xff0c;又称桥梁模式&#xff0c;是一种结构型设计模式。它的核心思想是将抽象部分与实现部分分离&#xff0c;使它们可以独立地进行变化&#xff0c;从而提高系统的灵活性和可扩展性。本文将详细介绍桥接模式的概念、原理…
阅读更多...
HTML综合

HTML综合

一.HTML的初始结构 <!DOCTYPE html> <html lang"en"><head><!-- 设置文本字符 --><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><!-- 设置网页…
阅读更多...
二维码数据集，使用yolov，voc，coco标注，3044张各种二维码原始图片（未图像增强）

二维码数据集，使用yolov，voc，coco标注，3044张各种二维码原始图片（未图像增强）

二维码数据集&#xff0c;使用yolov&#xff0c;voc&#xff0c;coco标注&#xff0c;3044张各种二维码原始图片&#xff08;未图像增强&#xff09; 数据集分割 训练组70&#xff05; 2132图片 有效集20&#xff05; 607图片 测试集10&#xff05; 305图…
阅读更多...
Python爬虫技术的最新发展

Python爬虫技术的最新发展

在互联网的海洋中&#xff0c;数据就像是一颗颗珍珠&#xff0c;而爬虫技术就是我们手中的潜水艇。2024年&#xff0c;爬虫技术有了哪些新花样&#xff1f;让我们一起潜入这个话题&#xff0c;看看最新的发展和趋势。 1. 异步爬虫&#xff1a;速度与激情 随着现代Web应用的复…
阅读更多...
最新文章

Copyright @ 2022~2023