CSS权威指南(二)选择符

news2024/11/17 6:45:34

1.样式的基本规则

     CSS的一个核心优势就是可以为文档中某种种类的元素全部应用相同的样式规则。CSS样式便于修改和编辑,而且能应用到指定的所有文本元素上。

(1)元素选择符

  即直接使用元素的名称进行选择,类似于p{ font-size:10px; }。元素选择符是最基本的选择符。

2.群组

(1)群组选择符',',群组选择符就是说相同规则选择符,也就是是说使用','将两个选择器分隔,就代表这两个选择器应用了相同的规则。

html,body {
    font-size: 10px;
    font-height: 600;
}

(2)通用选择符*,这个选择符会匹配所有元素。

ps.通常不建议使用

(3)类选择符'.'+class名称,类选择符主要是通过html标签上设置的class属性值进行匹配。

<div class="main"></div>

.main {
	background: #ffffff;
	font-size: 16px;
}

(4)id选择符'#'+id名称,id选择符主要是通过html标签上设置的id属性值进行匹配。

ps.id选择符的优先级高于class选择符

(5)属性选择符元素选择符[属性名称="属性值"](="属性值"部分可省略),属性选择符是一种带有内容匹配性质的选择符,他可以匹配带有某种属性的元素,也可以匹配带有某种元素,且属性值为一个具体值的元素。比如p[class]input[disabled="disabled"].同时属性选择符也支持部分属性匹配。

image-20230103180151753

(6)后代选择符父选择符 后代选择符,后代选择符寄选择父元素的后代元素,它的语法规则是使用空格隔开两个选择器,代表选择位于最前方元素的后代元素。

<div>
    <span></span>
</div>

div span {
	font-size: 16px;
}

(7)子选择符父选择符 > 子选择符,子选择符和后代选择符稍微有些区别,子选择符只选择当前父元素的直接后代子元素。

(8)相邻同胞选择器前选择符 + 后选择符,相邻同胞选择器可以选择与前面一个元素相邻的元素。

(9)后续同胞选择器前选择符 + 后选择符,后续同胞选择器主要是选择同一父元素下,后续的第一个匹配的选择符。

(10)伪类选择器:选择符名称/::选择符名称,与其他选择器不同,CSS具有非常丰富的伪类选择器。从功能上来看,主要可以分为:内容伪类、行为伪类、逻辑伪类等。比较常见的有::after,::before,:hover等。

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

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

相关文章

Lc.152 乘积最大子数组

题目链接1 前言翻译成大白话&#xff1a;就是找一个数组&#xff0c;其连续子数组的乘积最大值。2 算法思路&#xff1a;一般求最值的问题首选动态规划。这道题与[LC.53 最大子序和]很类似。我们假设状态转移方程为:它表示以第 i 个元素结尾乘积最大子数组的乘积可是在这里&…

异步通信技术AJAX | AJAX实现省市联动、AJAX跨域问题

目录 一&#xff1a;异步通信技术AJAX | 快速搞定AJAX&#xff08;第四篇&#xff09; 1、AJAX实现省市联动 2、超链接、form表单和JS代码跨域 3、AJAX跨域问题 &#xff08;1&#xff09;测试Ajax跨域访问 &#xff08;2&#xff09;同源 & 不同源 &#xff08;3&a…

可以通过哪些方式了解量化接口level2?

可以通过哪些方式了解量化接口level2&#xff1f;大家可以去百查看关于量化交易接口的信息&#xff0c;根据小编对市场上大多数的level2接口了解发现既有要收费的也有免费的&#xff0c;一般来说第三方软件公司提供的都是收费的居多&#xff0c;一些正规券商提供的就是免费的居…

一文读懂自动驾驶汽车:软硬结合 造就未来出行体验(下篇)

在上篇&#xff0c;我们回顾了自动驾驶汽车的发展历史&#xff0c;介绍了自动驾驶汽车的工作原理。得益于 AI 技术的突破&#xff0c;自动驾驶汽车飞速发展&#xff0c;运算速度也从 2007 年的 230 FLOPS 跃升至 2022 年的 254 TOPS&#xff0c;向软件定义汽车发展。现在&#…

数据结构-考研难点代码突破 (C++实现有向无环图的拓扑排序)

文章目录1. AOE网2. 拓扑排序C代码1. AOE网 AOV网∶若用DAG 图&#xff08;有向无环图&#xff09;表示一个工程&#xff0c;其顶点表示活动&#xff0c;用有向边<Vi&#xff0c;Vj>表示活动 Vi必须先于活动Vj进行的这样一种关系&#xff0c;则将这种有向图称为顶点表示…

基于主从博弈的智能小区代理商定价策略及电动汽车充电管理(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

C语言贪吃蛇大作战

C语言贪吃蛇大作战 贪吃蛇大作战 1997 年&#xff0c;诺基亚公司发布了贪吃蛇游戏&#xff0c;并将其内置于诺基亚 6110 手机中&#xff0c;使这款游戏迅速风靡全球&#xff0c;成为一代经典。一般的观点认为&#xff0c;贪吃蛇是手机游戏的鼻祖。 与传统单人贪吃蛇不同的是&…

【时间之外】系统管人,能行?(冷眼旁观连载之一)

目录 写作初心 在用工具 某微 某道 某书 工具痛点 某微痛点 某道痛点 某书痛点 总结一下&#xff1a;功能复杂 2023年观察计划 最大痛点 效果跟踪 未完待续 写作初心 2022年应该是这一生中值得纪念的一年&#xff0c;疫情封控自不必说&#xff0c;对于个人而言&a…

traefik gateway api

背景 在使用istio后开始考虑网关了&#xff0c;istio已经有自己的网关&#xff0c;为什么还要另外找一个别的网关&#xff0c;参考了好几个文章大致结论是&#xff0c;istio的网关功能不够强大&#xff0c;下图红色的部分是istio网关暂时缺失的&#xff0c;所以我的结论是在is…

Monorepo 下 Git 工作流的最佳实践

作者&#xff1a;林宜丙 背景 没有哪一种 Git 工作流是银弹&#xff0c;合适的 Git 工作流往往取决于项目的代码规模、协作人数、应用场景等&#xff1b;本次分享先从适合小型 Monorepo 的 Feature branch 工作流开始分享&#xff0c;接着分享适用于中大型 Monorepo 的 Trunk…

头歌:Ping客户端创建原始套接字(底部附全关完整答案)

头歌实践教学平台 (educoder.net)为Ping客户端创建一个原始类型的套接字原始套接字套接字&#xff08;socket&#xff09;是一个抽象层网络应用程序可以通过它发送或接收数据&#xff0c;可对其进行像文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O插入到网络中&a…

<C++>二叉树进阶

文章目录为什么要学这一节1. 二叉搜索树1.1 二叉搜索树概念1.2 二叉搜索树操作1.3 二叉搜索树的实现1.4 二叉搜索树的应用1.5 二叉搜索树的性能分析2. 经典题目2.1 最近公共祖先2.2 从前序与中序遍历序列构造二叉树2.3 二叉树的前序遍历&#xff08;非递归&#xff09;为什么要…

计算机组成原理复习:数据的表示和运算

计算机组成原理复习&#xff1a;数据的表示和运算2. 数据的表示和运算2.1 数制与编码2.1.1 数制&#xff1a;进位计数制及其相互转换2.1.2 编码&#xff1a;数值数据的编码与表示2.1.2.1 逻辑型数据2.1.2.2 字符型数据 之 ASCII码2.1.2.3 数值型数据 之 BCD码2.1.3 校验码——奇…

Part类 -- 上传文件

Part类 -- 上传文件一、核心方法1.1 HttpServletRequest 类方法1.2 Part 类方法二、代码示例前端搭配 form 表单&#xff1a;form input type “file”&#xff0c;允许通过浏览器选中一个文件上传给服务器。 Servlet 就支持处理这种上传文件的请求&#xff0c;把这个请求到的文…

安科瑞智能操控无线测温装置在江苏某化工产业园项目的应用

安科瑞 李亚俊 1 概述 江苏富强新材料有限公司是中国企业500强——山东金岭集团在江苏淮安盐化新材料产业园区投资设立的盐化工企业。公司将利用淮安丰富的盐矿资源和优越的发展环境&#xff0c;投资200亿元&#xff0c;建设120万吨/年离子膜烧碱项目、70万吨/年甲烷氯化物项…

vue新春游戏-拼手速抢车票小游戏,学习玩乐两不误,春节小游戏,新年小游戏

ue新春游戏-拼手速抢车票&#xff0c;老规矩&#xff0c;体验地址&#xff1a;http://game.pkec.net/word-ticket/。 写这个主要是前几天群里运营老师说咋没人写抢车票的&#xff0c;再加上我上一篇文章上了掘金一周&#xff0c;听说多上几次有证书&#xff0c;我还没搞到过掘金…

Go语言 函数传递:值传递 和 虚假的 “引用传递”

前言 其实从变量本身来说&#xff0c;go只有值传递&#xff0c;函数内的修改不会影响函数外。但有一种特例是指针&#xff0c;go可以传指针给函数&#xff0c;指针指向申请出来的实际内存&#xff0c;也就是保存元素的内存&#xff0c; 这样在函数内的修改&#xff0c;可以影响…

就算是TOP程序员,也有这些坏习惯

绝大多数程序员在职业生涯中&#xff0c;多多少少都会养成一些坏习惯&#xff0c;今天就来说一说身边最常见的一些坏习惯&#xff0c;也给刚入行的新朋友们提个醒&#xff0c;少走一些弯路。 那么&#xff0c;就让我们开始吧&#xff01; 1.不注意适当休息 比如日常工作时、…

B端产品-登录功能设计

在项目启动初期&#xff0c;基本大家都是先从账号体系先开始着手设计的&#xff0c;那么B端的登录功能如何设计呢&#xff1f; 一、需求分析 B端的产品的用户基本上可以分为内部员工和客户&#xff0c;如果是客户使用&#xff0c;基本上都会有注册功能&#xff1b;如果是内部员…

C# Console.Read读取回车和换行

C#的Console.Read函数&#xff1a; 读取缓冲区中的数据&#xff0c;读取到一个字符时停止。 C#的Console.ReadLine函数 读取缓冲区中的数据&#xff0c;遇到回车时停止。 Enter键&#xff1a; 将行数据输入缓冲区&#xff0c;并且将回车符和换行符 加入缓冲区。 注意 Consol…