nth-child 麻蛋 不要被它的 child 锁迷惑 要同类元素才行 v-for也没有关系的!

2023-12-15 04:10

本文主要是介绍nth-child 麻蛋 不要被它的 child 锁迷惑 要同类元素才行 v-for也没有关系的!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1 flex布局 子元素【注意是子元素】

使用     align-self: center; 来居中

2 子元素 order 控制顺序(有点像float left了~) 越小 在越前面

3 因为 样式灵活跳动   左- 右 、 右-左 、

选取 nth-child

但是 我对于这个理解有误

(1) v-for 不能写在根元素 因为写v-for的这个元素 会跟着整体一起开始循环  会生成好多qwq

(2) 规定属于其父元素的第二个子元素的每个 p 的背景色:

这个的意思 不是 “ 它是父元素 它的子元素“  而是 它本身  我们可以看一个例子

p:nth-child(2){
   background:#ff0000;
}

大家都是同样的元素  但是同样的第2个 才是我选到的

而不是在外面套一个div  然后div的子元素。

另外,注意如果前面有<h1> 那么 <p>和它是并列的 要多写一个菜可以  不过  还是从1 开始的下标

4 flex 0 0 45% 最后是宽度  前面 一个是不满的部分 一个是超出的部分

https://blog.csdn.net/weixin_30472035/article/details/99993236

全套操作指南https://blog.csdn.net/qq_36647038/article/details/83480026

5 async 是告诉我们  它是异步的 返回promise对象

await  相比于 之前不停.then() 的回调  遇到await会明白等await 进行完 再往下进行

如果有多个  会一个一个发 除非 promise.all

6 ::before after 不占文档流

它们给用到  比如aa| bb| 这种形式比较好

7 当然  上面那个 为什么不用 &nbsp; 来解决呢

 

这篇关于nth-child 麻蛋 不要被它的 child 锁迷惑 要同类元素才行 v-for也没有关系的!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/495061

相关文章

Tomcat版本与Java版本的关系及说明

《Tomcat版本与Java版本的关系及说明》:本文主要介绍Tomcat版本与Java版本的关系及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat版本与Java版本的关系Tomcat历史版本对应的Java版本Tomcat支持哪些版本的pythonJ

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件?二、我们为什么需要使用whl文件来安装python库?三、我们应该去哪儿下

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

MYSQL关联关系查询方式

《MYSQL关联关系查询方式》文章详细介绍了MySQL中如何使用内连接和左外连接进行表的关联查询,并展示了如何选择列和使用别名,文章还提供了一些关于查询优化的建议,并鼓励读者参考和支持脚本之家... 目录mysql关联关系查询关联关系查询这个查询做了以下几件事MySQL自关联查询总结MYSQL关联关系查询

电脑没有仿宋GB2312字体怎么办? 仿宋GB2312字体下载安装及调出来的教程

《电脑没有仿宋GB2312字体怎么办?仿宋GB2312字体下载安装及调出来的教程》仿宋字体gb2312作为一种经典且常用的字体,广泛应用于各种场合,如何在计算机中调出仿宋字体gb2312?本文将为您... 仿宋_GB2312是公文标准字体之一,仿China编程宋是字体名称,GB2312是字php符编码标准名称(简

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

豆包 MarsCode 不允许你还没有女朋友

在这个喧嚣的世界里,爱意需要被温柔地唤醒。为心爱的她制作每日一句小工具,就像是一场永不落幕的浪漫仪式,每天都在她的心田播撒爱的种子,让她的每一天都充满甜蜜与期待。 背景 在这个瞬息万变的时代,我们都在寻找那些能让我们慢下来,感受生活美好的瞬间。为了让这份浪漫持久而深刻,我们决定为女朋友定制一个每日一句小工具。这个工具会在她意想不到的时刻,为她呈现一句充满爱意的话语,让她的每一天都充满惊喜和感动