CSS中的伪类 引言 CSS（Cascading Style Sheets，层叠样式表）是Web开发中不可或缺的一部分。它用于控制网页的外观和布局，使得网页不仅功能强大，还具有吸引力。...结构选择：使得开发者可以选择基于文档树结构的特定元素，如第一个子元素、最后一个子元素、奇数或偶数位置的子元素等。 增强交互性：通过伪类，开发者可以实现更加动态和交互性强的网页效果。...:nth-child() :nth-child()伪类用于选择其父元素的第n个子元素，可以是奇数、偶数或特定位置的子元素。...:nth-of-type() :nth-of-type()伪类用于选择指定类型的第n个兄弟元素。 p:nth-of-type(2) { color: blue; } 2....动态更新：当元素状态发生变化（如鼠标悬停、获取焦点等），浏览器重新计算并更新样式。 性能优化 性能指标 伪类的性能主要体现在选择器匹配和样式应用的效率上。
往期推荐 如何在矩阵的行上显示“其他”【1】 如何在矩阵的行上显示“其他”【2】 正文开始 上一篇文章的末尾，我放了一张动图： 当年度切片器变换筛选时，子类别中显示的种类和顺序是不相同的，但不变的是...那么我们基本上可以得出结论了：数据表是由子类别和年度组合构成，把每年的子类别对应的销售额放进去，通过筛选年度切片器，达到选择不同年份时显示不同的销售额。 我们根据以上的思路试着来建立模型。...计算每个子类别的年度sales值 sales = VAR NIAN=[年度] RETURN CALCULATE([sales],'日期表'[年度]=NIAN) 3.添加各年每个子类别的sales...子类别表2 = SUMMARIZE('data',data[子类别],'日期表'[年度]) 5.将每年的排序值大于10的rankx标记为11 其实这一步，如果想简单一点，可以和第3步合并到一起，用一个变量返回值来实现...我们来看一下效果： 这样基本达到了本文开始的要求： 当年度切片器变换筛选时，子类别中显示的种类和顺序是不相同的，但不变的是： ①others永远显示在最后一行 ②显示的10个子类别按照sales或sales
，n默认从0开始）的子元素 :first-child 获取第一个子元素 :last-child 获取最后一个子元素 :only-child 如果当前元素是唯一的子元素，则匹配 :nth-last-child...(index/even/odd/公式) 选择所有它们父元素的第n个子元素。...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个 带有“of-type” 与未带有“of-type”项的选择器有一定的区别。...参数fn表示在动画完成时执行的函数。 参数opacity表示透明度数值（范围在0~1之间，0代表完全透明，0.5表示50%透明，1代表完全不透明）。
还介绍了文本与字体属性，如段落和行相关属性、字体文本属性。最后阐述了盒子模型，如元素隐藏、行内与块元素转换、盒子构成及相关属性等。...css3 层叠样式表css全名叫做层叠样式表，层叠性是它很重要的性质，多个选择器可以同时作用于同一个标签，效果叠加。...p::first-line { font-weight: bold; color: purple;}4、::selection用于设置用户选中页面元素时的样式，包括文字选中时的背景色和文字颜色等。...:last-child选择父元素的最后一个子元素:nth-child(n) 第n个子元素:nth-of-type(n) 选择父元素下指定类型的第n个元素，只针对指定类型的元素进行计数和选择，而不会考虑其他类型的元素...:nth-last-child(n)] 从父元素的最后一个子元素开始计数，选择第n个元素:nth-last-of-type(n) 从父元素的最后一个指定类型的子元素开始计数，选择第n个元素元素关系选择器名称举例意义子选择器
6.CSS 3的同级元素通用选择器 选择器含义示例E ~ F匹配任何在E元素之后的同级F元素p ~ ul { background:#ff0; } 7．CSS 3 属性选择器 选择器含义示例E[att...{ background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; }E:nth-child(n)匹配其父元素的第...n个子元素，第一个编号为1E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素...E:nth-last-of-type(n)与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child...(1)E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type
标签，在某些情况下很有用，比如当你不能直接修改 CSS 文件时。...外部样式表 将 CSS 保存在一个独立的扩展名为 .css 的文件中，并在 HTML 的 里使用 元素中引用它，这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式...，并且需要更新 CSS 的时候只要在一个地方更新。...选取属于父元素的特定类型的唯一子元素 :nth-child(n) 选取元素的第n个子元素 :nth-last-child(n) 选取元素的倒数第n个子元素 :nth-of-type(n) 选取属于父元素的特定类型的第...n个子元素 :nth-last-of-type(n) 选取属于父元素的特定类型的倒数第n个子元素 :enabled 选取启用状态的元素 :disable 选取被禁用状态的元素 :checked 选取所有选中的复选框和单选按钮元素
E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； div>ul>li:nth-child...但是当n时，选取无效。...(层叠样式表) CSS (层叠样式表) h2:target{ color:red; } 三、nth选择器 :first-child... 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-last-child() ...E::first-letter 文本的第一个字母或字（如中文、日文、韩文等）； 案例：首字下沉 E::first-line 文本第一行； 文本第一行高亮..
css" href="css/main.css"> 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。...1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 css"> .list div:nth-child(2)...-- 第2个子元素div匹配 --> 2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反） 3、E:first-child：匹配元素类型为E且是父元素的第一个子元素...4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素 6、E:nth-of-type(n)：匹配父元素的第n...ease-in-out 开始和结束时慢速 cubic-bezier(n,n,n,n) 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335) 曲线设置网站：https
CSS，全称叫做 Cascading Style Sheets，即层叠样式表。“层叠”是指当在 HTML 中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。...这就是 CSS 选择器，其筛选功能还是非常强大的。...:nth-child(n) p:nth-child 选择属于其父节点的第二个子节点的每个 p 节点。...:nth-last-child(n) p:nth-last-child 同上，从最后一个子节点开始计数。...:nth-last-of-type(n) p:nth-last-of-type 同上，但是从最后一个子节点开始计数。
如: body *:not(h3)。...:nth-child(n)和nth-last-child(n)选择器 使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...:nth-of-type(n)和:nth-last-of-type(n)选择器 这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。
目录 前言 一、使用css修改元素的样式 1、内联样式、行内样式： 2、内部样式表： 3、外部样式表：（最佳） 二、CSS基本语法 三、CSS中的各类选择器 1、 元素选择器： 2、 id选择器...网页分成三个部分：结构（HTML）、表现（CSS）、行为（JavaScript） CSS： 定义：层叠样式表，用来设置网页中元素的样式。 ...注意：练习时可以使用，但开发时绝对不要使用内联样式。 ...3、外部样式表：（最佳） 可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件。 ...() 选中第n个子元素 特殊值：n 第n n的范围0到正无穷 2n 表示选中偶数位的元素
双冒号(::)：在CSS3中引入了双冒号语法，用于表示伪元素。它是较新的语法规范，建议在使用CSS3伪元素时使用双冒号。例如：::before、::after。...单冒号(:)：在CSS2中引入了单冒号语法，最初用于表示伪类，如:hover、:active。然而，由于历史原因，单冒号也可以用于表示某些伪元素，如:before、:after。...这只是一小部分常见的 CSS3 伪元素，CSS3 还引入了其他伪元素，如 ::nth-child、::last-child、::nth-of-type 等，用于选择特定的子元素或元素类型，并对其应用样式...:first-child：选择父元素下的第一个子元素。 :last-child：选择父元素下的最后一个子元素。 :nth-child(n)：选择父元素下的第 n 个子元素。...:nth-of-type(n)：选择父元素下同类型元素中的第 n 个元素。 :not(selector)：选择不满足指定选择器的元素。 :empty：选择没有子元素或者没有文本内容的元素
本文为CSS基础知识。 CSS的一些基础知识 CSS简介 CSS全称（Cascading Style Sheets）称为层叠样式表，他的存在使 HTML 与样式分离。...-- 结果属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-child(n) { ...查找第n个子selector，后同。 } 第 an+b 个子节点(n从0开始的递增值，a、b为数字。) --> selector:nth-child(an+b) { ... } 第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-of-type(n) { ... } 第 an+b 个子节点(n从0开始的递增值，a、b为数字。)
CSS 1.1 CSS 编写的位置 使用CSS来修改元素的样式 第一种方式：内联样式/行内样式 第二种方式：内部样式表 第三种方式：外部样式表(最佳实践) 1.1.1 内联样式 在标签内部通过...css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可，内部样式表更加方便对样式进行复用 问题: 我们的内部样式表只能对一个网页起作用， 它里边的样式不能跨页面进行复用...样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件，外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用，...伪类一般情况下都是使用:（冒号）开头 例如： :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child()选中第n个子元素 特殊值: ...n 第n个 n的范围 0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 以上这些伪类都是根据所有的子元素进行排序 :first-of-type
标签：Python与Excel,pandas 这里，我们将学习如何在Python中实现常见的Excel操作——查找和替换数据。...先导列第0行和第9行中的值已更新。 图2 带筛选的条件替换 该方法解决了直接替换法无法解决的一个问题，即当我们需要基于数据本身的值以外的一些条件来替换数据时。...这里有一个例子：对于飞行员“Kaworu Nagisa”（第4行和第6行），我们想将他的阵营从“Ally（盟友）”改为“Enemy（敌人）”。...一旦有了这个子数据集，我们就可以随意修改这两个记录上的任何内容，所以让我们将其Side从“Ally”改为“Enemy”。如果仍想在此处使用.replace()，可随意使用。然而，也可用另一种方式去做。...还记得当我们介绍筛选时，实际上可以选择特定的列吗？因此，我们将只为符合条件的记录选择Side列，然后直接在该列中赋值“Enemy”。顺便说一句，这是一种更具python风格的代码编写方式。 图4
近来很多朋友在使用敲敲云时，不清楚如何使用主子表，及如何在主表中统计子表数据；下面我们就以《订单》表及《订单明细》表来设计一下吧，用到的组件有“设计子表”、“公式”、“汇总”等。...新建主表《订单》表图片2. 设计主表《订单》表先根据需求添加订单基本属性，将组件直接拖拽至表单中即可。如订单编号、订单状态、订单日期等。图片3....添加子表将“设计子表”组件，拖拽至相应位置，即可添加一个子表图片3.1 选择子表方式添加子表后，会让我们选择是“全新创建”，还是“将已有工作表作为子表”，本示例以“全新创建”为例。...添加到子表中并修改字段名称为“小计”图片类型选择为“数值”，计算方式选择为“乘积”其他的计算方式，我们使用“自定义”图片选择计算乘积的字段—“数量”、“单价”图片设置保留小数位数及单位图片设置完成后如下图，单价、数量改变时，...“已填计数”或“未填计数”图片设置汇总筛选条件当我们需要根据筛选条件过滤需要汇总的数据时，我们可以设置汇总筛选条件图片以上，主表-《订单》、子表-《订单明细》就设置完成了。
如果为表中的每一列都创建索引，那么这些索引的存储开销可能会非常大，尤其是在大数据集上。索引重建增加开销：当数据发生变更（如插入、更新或删除）时，相关的索引也需要进行更新，以确保数据的准确性和查询效率。...对于选择性低的列（如性别列，其中只有“男”和“女”两个值），创建索引可能不会产生太大的查询性能提升。过度索引：当表中存在过多的索引时，可能会导致数据库优化器在选择使用哪个索引时变得困难。...%';右模糊查询： 继续使用上述customer表，我们想要查询名字以"n"结尾的客户：sql复制代码SELECT * FROM customer WHERE name LIKE '%n';注意，在某些数据库中...1000美元的客户ID，然后使用这个子查询的结果来过滤客户表并获取客户姓名。...深分页limit优化深分页通常指的是在处理大量数据时，用户需要浏览远离首页的页面，例如第100页、第1000页等。
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...li:last-child{ background-color:red; } 33：E:nth-child(n)，匹配其父元素的第n个子元素，从1...li:nth-child(2){ background-color:red; } 34：E:nth-last-child(n)，匹配其父元素的倒数第...n个子元素，倒数第一个的index为1。...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...li:last-child{ background-color:red; } 33：E:nth-child(n)，匹配其父元素的第n个子元素，从1...，匹配其父元素的倒数第n个子元素，倒数第一个的index为1。...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
仅增量因子为1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。 希尔排序的示例： ?...，依次类推，直到第n-1个元素（倒数第二个数）和第n个元素（最后一个数）比较为止。...1）n 个结点的完全二叉树，则最后一个结点是第 ? 个结点的子树。 2）筛选从第 ? 个结点为根的子树开始，该子树成为堆。 3）之后向前依次对各结点为根的子树进行筛选，使之成为堆，直到根结点。...归并排序（Merge Sort） 基本思想： 归并（Merge）排序法是将两个（或两个以上）有序表合并成一个新的有序表，即把待排序序列分为若干个子序列，每个子序列是有序的。...归并的迭代算法 1 个元素的表总是有序的。所以对n 个元素的待排序列，每个元素可看成1 个有序子表。对子表两两合并生成n/2个子表，所得子表除最后一个子表长度可能为1 外，其余子表长度均为2。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
