首页 > 其他分享 >less中使用&:first-child的知识点

less中使用&:first-child的知识点

时间:2024-11-19 15:55:55浏览次数:1  
标签:知识点 第一个 元素 child titleLeft 选择器 first

 

& 也代表父选择器的引用,可以继续使用 & 来引用父级选择器,但要确保正确地应用 :first-child 伪类。

.titleLeft {
  width: 70%;
  display: flex;
  align-items: center;

  &:first-child {
    margin-right: 20px;
  }
}

 

解释:

  • &:first-child 代表 .titleLeft 元素本身的第一个子元素。
  • LESS 会自动处理 &,并将它编译为 .titleLeft:first-child,即选择 .titleLeft 的第一个子元素。

注意:

  • 如果 .titleLeft 本身并不是其父元素的第一个子元素(例如,.titleLeft 是其他元素的子元素),那么 &:first-child 是无效的。&:first-child 会尝试选择 .titleLeft 元素本身作为父元素的第一个子元素,而不是 .titleLeft 内的第一个子元素。
  • 如果你的目标是选中 .titleLeft 元素下的第一个子元素,则应使用 :first-child 选择器并且不加 &

 

修正后的代码(选中 .titleLeft 下的第一个子元素):

.titleLeft {
  width: 70%;
  display: flex;
  align-items: center;

  > :first-child {
    margin-right: 20px;
  }
}

解释:

  • > :first-child 会选择 .titleLeft 下的第一个子元素,并应用 margin-right: 20px
  • > 是子选择器,确保选中的是 .titleLeft 的直接子元素,而不是嵌套的子元素。

总结:

  • LESS 允许使用 & 来引用父选择器,但需要根据你想要实现的选择进行调整。
  • 如果要选择 .titleLeft 元素下的第一个子元素,应该使用 > :first-child

标签:知识点,第一个,元素,child,titleLeft,选择器,first
From: https://www.cnblogs.com/Simoon/p/18555017

相关文章

  • C/C++ 知识点:extern 关键字
    文章目录一、extern关键字1、什么是extern?2、基本用法2.1、声明全局变量2.2、声明函数2.3、使const变量具备外部连接性3、`extern"C"`特殊用途3.1、C调用C++3.2、C++调用C4、注意事项5、总结前言:在C和C++编程语言中,extern关键字扮演着连接不同源文件(或称为翻......
  • 线性代数知识点复习——范数
    范数(Norm)是数学中的一个概念,用于度量向量、矩阵或张量的大小或长度。范数是向量空间上的一种函数,能够将向量映射为非负实数,表示向量的某种“长度”或“大小”。    ......
  • 新版华为认证全套资料(题库试题、知识点速记、考试大纲、思维导图、面试宝典)
    话不多说,直接上硬菜!一、HCIA、HCIP题库试题华为认证考试题型有单选、多选、判断、填空、拖拽题,每种题型常考什么知识点,各种知识点又会以什么样的方式去考察,都需要我们在不断刷题练习中去熟悉!HCIA题库试题:1、以下关于路由器的描述,说法错误的是?()A、路由器可以作为网关设备......
  • Java学习教程,从入门到精通,Java继承语法知识点及案例代码(29)
    1、Java继承语法知识点及案例代码一、继承的基本概念继承是面向对象编程中的一个重要概念,指的是子类从父类继承属性和方法的能力。通过继承,子类可以直接访问父类的非私有属性和非私有方法,实现代码重用和扩展。二、继承的语法在Java中,使用关键字extends来实现继承。子类......
  • 前端 易混淆知识点梳理
    目录一、严格模式与非严格模式二、双等于三等的区别三、防抖和节流四、原型和原型链五、页面重绘和回流六、script标签async和defer七、普通函数和箭头函数的区别八、JS闭包1、闭包特点2、闭包作用3、闭包风险4、运用场景1)常见闭包2)实现模块化3)缓存函数4)封装私......
  • AcWing 进阶课知识点模板梳理
    EK求最大流点击查看代码#include<bits/stdc++.h>#defineintlonglongusingnamespacestd;constintN=1005,M=20005,INF=1e8;intn,m,S,T;inth[N],e[M],f[M],ne[M],idx;intq[N],d[N],pre[N];boolst[N];voidadd(inta,intb,intc){e[idx]......
  • 进程的知识点
    进程的基本概念进程是操作系统中的一个执行单位,代表正在运行的程序实例。每个进程都有自己独立的内存空间和系统资源,独立于其他进程运行。进程的生命周期包括创建、就绪、运行、等待和终止等状态。进程的创建与管理在操作系统中,进程的创建和管理通常通过系统调用实现,如fork(......
  • JAVA部分基础知识点(四)【持续更新】
    1.方法重写当子类觉得父类中的某个方法不好用,或者无法满足自己的需求时,子类可以重写一个方法名称、参数列表一样的方法,去覆善父类的这个方法,这就是方法重写。【注意:重写后,方法的访问,Java会遵循就近原则】方法重写的其它注意事项:重写小技巧:使用Override注解,他可以指定java......
  • 带你一起全面了解关于Python网络爬虫的相关知识点!
     成长路上不孤单......
  • c语言知识点总结-字符串、思维导图
    字面串、字符串变量、字符串的读写、字符串中字符的访问、函数、字符串处理操作、字符串数组总结。文中链接:CSDNhttps://mp.csdn.net/mp_blog/creation/editor/143772084锦黎pro-CSDN博客锦黎pro擅长c语言知识点总结、思维导图,等方面的知识https://blog.csdn.net/jilipro?......