first-child、first-of-type等属性的差别

1、xxx:first-child 伪类 xxx作为第一个子元素

//p元素作为第一个子元素的都会变色
p:first-child
{
background:yellow;
}

//p作为父元素的 第一个子元素。不要求第一个元素的类型
p>:first-child 
{background:yellow;
}//p作为父元素的 第一个子元素。要求第一个元素的类型是span
"p > span:first-child": {fontSize: "11px",
}

 2、xxx:first-of-type 伪类 xxx是父元素的所有xxx元素里面的第一个。只要是该类型元素的第一个就行了,不要求是是第一个子元素了。

:first-child和:first-of-type的区别_王嘉尔的jacky的博客-CSDN博客_:first-of-type和:first-child

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

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

相关文章

我的Serverless实战——引领云计算的下一个十年

前言:如今,越来越多的大厂企业开始大规模使用Serverless,处于变革中的开发者,大多已从观望状态转向尝试阶段,越来越多Serverless落地场景被解锁。作为基础研发底座,越来越多企业开始接受Serverless&#xf…

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth <!DOCTYPE html> <html><head><meta charset"utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#con…

花了两天时间用html+css+js做了一个网页版坦克大战游戏

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享如何用htmlcssjavaScript去做一个简易网页版坦克游戏。 目录 坦克游戏玩法及介绍 项目结构 源码地址&#xff1a; 坦克游戏玩法及介绍 我们先来看一下首页。 打开这个首页很简单&#xff0c;基本是上面这个样子&…

设置文字多行显示溢出显示省略号

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; }<div id"news_text"&g…

vue项目有几个接口content Download时间特别长的解决办法

做的可视化地图项目&#xff0c;有几个接口加载比较慢&#xff0c;大概16S左右&#xff0c;第一次加载接近一分钟&#xff0c;这谁能受得了。 对比了正式环境和测试环境&#xff0c;这个接口数据量一样&#xff0c;就是在测试服务器比较慢&#xff0c;排除滚动插件及其它的影响…

Jmeter调试工具---HTTP Mirror Server

转自&#xff1a;http://www.cnblogs.com/puresoul/p/4907655.html 一、HTTP Mirror Server的作用&#xff1a; 它可以在本地临时搭建一个HTTP服务器&#xff0c;该服务器把接收到的请求原样返回&#xff0c;这样就可以看到发送出的请求的具体内容&#xff0c;以供调试。 二、…

520 单身福利|女朋友又找我要礼物

大家好&#xff0c;我是孙叫兽&#xff0c;520快到了&#xff0c;给大家分享一下单身福利&#xff01;时间过得真快&#xff0c;一转眼又到了 520&#xff0c;有对象的程序员又激动又扎心的节日&#xff0c;其实吧&#xff0c;程序员对这种节日又期待又焦灼&#xff0c;为什么呢…

pit和systick_PIT和TestNG突变测试简介

pit和systick变异测试是一种技术&#xff0c;它可以发现测试未涵盖代码的哪些部分。 它类似于代码覆盖范围 &#xff0c;但变异测试不限于在测试期间执行给定行的事实。 这个想法是修改生产代码&#xff08;引入突变&#xff09;&#xff0c;这应该改变其行为&#xff08;产生不…

使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法

引言&#xff1a;做可视化地图项目&#xff0c;使用vue-seamless-scroll实现表格数据自动滚动&#xff0c;有个bug就是复制出来的数据点击事件失效。这个插件底层的实现是cope的形式&#xff0c; 无限滚动原理&#xff1a;无限滚动的原理就是把之前的遍历的内容复制一份&#x…

最短路的几种算法及其优化(模板)

一.Dijkstra 算法 dijkstra算法适用于边权为正的情况&#xff0c;求单源最短路&#xff0c;适用于有向图和无向图 模板伪代码&#xff1a; 清除所有点的标号 设d[0]0&#xff0c;其余d[i]INF&#xff1b; 循环n次{ 在所有未标记的节点中&#xff0c;寻找d[i]最小的点x 给x做标记…

极客青年说,北京沙龙

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享infoq写作平台在北京站的沙龙主题。主要流程如下&#xff1a;早上起来&#xff0c;吃了点饭&#xff0c;然后就去北京望京悠乐汇的A1202,这次是个轰趴馆&#xff0c;比较适合年轻的程序员放松。去的稍微早了点&…

vue点击弹窗自动触发点击事件的解决办法

业务场景&#xff1a;使用vue element ui 的el-dialog&#xff0c;点击弹窗之后&#xff0c;默认加载第一个按钮的数据进行初始化。 div 指令&#xff1a; // 自动触发点击事件directives:{trigger:{inserted(el,binging){// console.log("自动触发事件")el.click()}…

vue根据表格字段不同的状态显示不同的颜色。

业务需求:根据后台返回的数据,对表格中的严重等级和问题状态做一下颜色区分。数据很大,大概一年左右的数据,在二级弹窗中,数据滚动的形式。 大家好,我是孙叫兽 不加状态前: 我这个使用vue+div循环的实现,很便捷,使用element ui也是可以的。 然后再computed:{}中添加…

Apache JMeter教程

要负载测试您的Web应用程序吗&#xff1f; 然后&#xff0c;您应该了解Apache JMeter &#xff01; 该JMeter教程介绍了基本概念以及如何创建测试计划以及如何执行它以对应用程序进行基准测试。 这是我在Disy的Tech-Blog上的文章的交叉张贴 -谢谢您让我在公司时间写文章&…

Echats给柱状图及提示文字添加百分号(%)的解决办法

业务需求&#xff1a;给柱状图添加百分号。 目录 柱状图上添加%效果图 悬浮标签添加%效果图&#xff1a; 刚开始从后台取的数据带%&#xff0c;我这边取这个值的时候显示undifined&#xff0c; 后来就让这哥们把这类的数据从数据库把%去掉。这样我这边就取到了数据&#xff0…

前端使用linux命令更新项目生产包与测试包命令

业务需求&#xff1a;把vue开发的项目打成dist.zip文件&#xff0c;丢到服务器去&#xff0c;通过域名进行访问。 首先登录云管平台的账号和密码&#xff0c;找到对应的服务器&#xff0c;然后连接到堡垒机。 在命令行进入到域名下的地址及目录。 切换到测试文件夹 点击左上角…

CSDN学习神器——CSDN浏览器助手测评体验

导读&#xff1a;大家好&#xff0c;我叫孙叫兽&#xff0c;本期内容给大家分享一下CSDN浏览器助手这款插件&#xff0c;看看最新版的插件已经比较完善了&#xff0c;还有一些可以优化的地方。下面简单进行体验一把最新版&#xff01; 体验时间&#xff1a;2021年5月31日。 目录…

CVE-2016-0143 漏洞分析(2016.4)

CVE-2016-0143漏洞分析 0x00 背景 4月20日&#xff0c;Nils Sommer在exploitdb上爆出了一枚新的Windows内核漏洞PoC。该漏洞影响所有版本的Windows操作系统&#xff0c;攻击者利用成功后可获得权限提升&#xff0c;微软在4月补丁日修复了该漏洞。 0x01 漏洞分析 Nils Sommer并没…

HB-X打不开的解决办法

导读&#xff1a;今早点击HB-X这款编译器的时候&#xff0c;点击快捷键和图标按钮一点反应都没有。死活打不开。 点击的时候一点提示都没有&#xff0c;重启电脑打开也是如此。 解决办法&#xff1a; 关机重启&#xff0c;一定要关机再重启。 其它情况请参考这个帖子&#xff…

【iCore3 双核心板_ uC/OS-III】例程五:软件定时器

实验指导书及代码包下载&#xff1a; http://pan.baidu.com/s/1eSHenjs iCore3 购买链接&#xff1a; https://item.taobao.com/item.htm?id524229438677 转载于:https://www.cnblogs.com/xiaomagee/p/5453762.html