前端css class嵌套/选择器总结(目的:识别less文件中嵌套的写法)

【自取】最近整理的,有需要可以领取学习:

1 问题
写前端代码,css调半天,最后还被前端无情地推倒重写,最后人家写的还看不懂
2 css基础整理
任意一种class都有效
.classA,.classB{
}

同时拥有两个class才有效
.classA.classB{
}

classA元素内部所有声明了classB的元素都有效(空格隔开)
.classA .classB{
}

classA内部第一层声明了classB的所有元素有效
.classA > .classB {
}

有效

无效

有效

标签的对应组
/*所有,

都生效/
div,p{
}
/
内部的所有

都生效/
div p{
}
/
内部第一层

生效/
div > p{
}
3 class与标签的混合
基本混合
/
声明了classA的所有 /
div.classA {
}
/
声明了classA的元素,内部的所有 有效*/
.classA div{
}
逗号、空格、小于号(

目标元素可加class
元素添加自定义classB
copy出实际生效的classA
css文件中粘贴实际生效的classA,然后加上自定义classB, 这样你的优先极更高,即使classA在最后加载
.classA.classB{
}
框架自动会加上classA
目标元素不可加class
这种情况一般是框架组件自动生成多层元素,自定义的class加不进去
思路:从父级元素入手,最上层的元素肯定是可以加自定义class的,实在不行,大不了直接套一层div. 然后利用层级关系达到设置的目的

父级div声明classA
按照层级直接设置
.classA div>p>span{
color:purple;
}
.classC{
color:red;
}

我是紫色,默认的红色无效

注 :nth-child(num) 可以指定第几个子元素

6 less文件写法的规则
通过 { } 隔开,最终生成css文件是通过空格连接
.classA{
div{
}
}
/等效于/
.classA div{
}
less的&:nth-child写法
.classA {
div {
&:nth-child(1){

}
}
}
/等效于/
.classA div:nth-child(1){
}
————————————————
版权声明:本文为CSDN博主「lanxing_thk」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lanxing_huangyao/article/details/123967330

Original: https://www.cnblogs.com/javalinux/p/16479134.html
Author: hellodev
Title: 前端css class嵌套/选择器总结(目的:识别less文件中嵌套的写法)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/8638/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

发表回复

登录后才能评论
免费咨询
免费咨询
扫码关注
扫码关注
联系站长

站长Johngo!

大数据和算法重度研究者!

持续产出大数据、算法、LeetCode干货,以及业界好资源!

2022012703491714

微信来撩,免费咨询:xiaozhu_tec

分享本页
返回顶部