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

1 问题

• 写前端代码，css调半天，最后还被前端无情地推倒重写，最后人家写的还看不懂

2 css基础整理

• 任意一种class都有效

.classA,.classB{
}

<div class="classA"></div>
<div class="classB"></div>

• 同时拥有两个class才有效

.classA.classB{
 }

<div class="classA classB"></div>

• classA元素内部所有声明了classB的元素都有效(空格隔开）

.classA .classB{
}

<div class="classA">
	<div class="classB"></div>
	<div>
		<div class="classB"></div>
    </div>
</div>

• classA内部第一层声明了classB的所有元素有效

.classA > .classB {
}

<div class="classA">
	<div class="classB">有效</div>
	<div>
		<div class="classB">无效</div>
    </div>
    <div class="classB">有效</div>
</div>

• 标签的对应组

/*所有<div>,<p>都生效*/
div,p{
}
/*<div>内部的所有<p>都生效*/
div p{
}
/*<div>内部第一层<p>生效*/
div > p{
}

3 class与标签的混合

• 基本混合

/*声明了classA的所有<div>*/
div.classA {
}
/*声明了classA的元素，内部的所有<div>有效*/
.classA div{
}

• 逗号、空格、小于号(<), 意义是一样的，无论两边是class还是html元素

4 注意事项

• 同等效果的class，优先级取决于css文件的加载顺序，而不是元素class=""中的声明顺序

.classB{
	color:red;
}
.classA{
	color:green;
}

<div class="classA classB">文字是绿色</div>

5 摆脱css被覆盖的两个小技巧

目前很多前端组件框架的样式，让人很难更改，尤其是加载在最后的css文件，会让自定义css被覆盖，一般分两种情况

目标元素可加class

• 元素添加自定义classB
• copy出实际生效的classA
• css文件中粘贴实际生效的classA，然后加上自定义classB, 这样你的优先极更高,即使classA在最后加载

.classA.classB{
}

<div class="classB">框架自动会加上classA</div>

目标元素不可加class

这种情况一般是框架组件自动生成多层元素，自定义的class加不进去
思路：从父级元素入手，最上层的元素肯定是可以加自定义class的，实在不行，大不了直接套一层div. 然后利用层级关系达到设置的目的

• 父级div声明classA
• 按照层级直接设置

.classA div>p>span{
    color:purple;
}
.classC{
    color:red;
}

<div class="classA">
    <div>
        <p><span class="classC">我是紫色，默认的红色无效</span></p>
    </div>
</div>

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

6 less文件写法的规则

• 通过 { } 隔开，最终生成css文件是通过空格连接

.classA{
	div{
	}
}
/*等效于*/
.classA div{
}

• less的&:nth-child写法

.classA {
	div {
      &:nth-child(1){
      
      }
	}
}
/*等效于*/
.classA div:nth-child(1){
}