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){
}