前端⾯试拾遗——CSS选择器、Flex布局、position
前端⾯试拾遗——CSS选择器、Flex布局、position
前⾔
在某公司的前端⾯试中，被问到了关于CSS选择器，flex布局以及position相关的问题，在这篇⽂章中整理⼀下相关知识点。
CSS选择器
关于CSS选择器跟属性的所有详细信息都可以在 中获取，CSS选择器的主要分类有
基本选择器
元素选择器
类选择器
ID选择器
通配选择器
属性选择器
组合选择器
相邻兄弟选择器
普通兄弟选择器
⼦选择器
后代选择器
伪元素
标准伪类
具体就参考MDN，这⾥就详细说明⼀下⾯试官问到的属性选择器。因为在做相关项⽬的时候没有意识使⽤属性选择器所以对属性选择器的接触⽐较少，所以直接跟⾯试官说不是很熟悉，⾯试官就没有接着问下去了。
属性选择器的主要语法如下所⽰
[attr]
表⽰带有以 attr 命名的属性的元素。
[attr=value]
表⽰带有以 attr 命名的，且值为”value”的属性的元素。
[attr~=value]
表⽰带有以 attr 命名的属性的元素，并且该属性是⼀个以空格作为分隔的值列表，其中⾄少⼀个值为”value”。
[attr|=value]
表⽰带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（”-“为连字符，Unicode编码为U+002D）开头。典型的应⽤场景是⽤来来匹配语⾔简写代码（如zh-CN，zh-TW可以⽤zh作为value）。
[attr^=value]
表⽰带有以 attr 命名的，且值是以”value”开头的属性的元素。
[attr$=value]
表⽰带有以 attr 命名的，且值是以”value”结尾的属性的元素。
[attr*=value]
表⽰带有以 attr 命名的，且值包含有”value”的属性的元素。
然后我觉得⾯试可能会问到的还有，相邻兄弟选择器跟普通兄弟选择器有什么区别？⼦选择器跟后代选择器有什么区别？
这两个的区别都是⽐较相似，相邻兄弟选择器顾名思义就是只会选择相邻的兄弟，⽽普通兄弟选择器则会在所有兄弟之间选择。⼦选择器只会在⼦元素中选择⽽后代选择器则会在所有后代中选择，包括⼦代的⼦代。
下⾯的代码可以进⾏相关的测试
<!--兄弟选择器测试-->
<div id="b1">brother 1</div>
<div id="b2">brother 2</div>
<div id="b3">brother 3</div>
<div id="b4">brother 4</div>
/*相邻兄弟选择器测试*/
#b1 + #b2{
color:red;
}
#b1 + #b4{
color:red;
}
应⽤这个样式的结果如图所⽰
/*普通兄弟选择器*/
#b1 ~ #b2{
color:red;
}
#b1 ~ #b4{
color:red;
}
应⽤这个样式后的结果如图所⽰
<!--⼦代/后代选择器测试-->
<ul id="parent">
<li>
<ul>
<li>grandson - 1</li>
<li>grandson - 2</li>
</ul>
</li>
<li>son -1</li>
<li>son -2</li>
</ul>
/*⼦代选择器测试*/
ul{
color: black;
}
#parent > li{
color: red;
}
应⽤该样式后得到结果如图所⽰
/*后代选择器测试*/
ul{
color: black;
}
#parent > li{
color: red;
}
应⽤该样式后得到的结果如图所⽰
flex布局
关于弹性盒⼦模型的详细信息可以查阅
⾯试官问的⼀个问题是ABC三个页⾯元素，怎样调换AC元素的位置使其变成CBA。我⼀时没有答出来，到最后问了⼀下⾯试官答案，他列举了很多⽅法，包括使⽤flex，JQuery和Vue。因为⼀直没有了解过flex这个新的布局特性，所以就在这⾥总结⼀下flex的⽤法。
⾸先就是调换顺序的问题
<!--flex测试-->
<div class="flex">
<div class="content">第⼀个元素</div>
<div class="content">第⼆个元素</div>
<div class="content">第三个元素</div>
</div>
}
.flex > div:nth-child(2){
background: lightblue;
order: 1;
jquery是什么选择器}
.flex > div:nth-child(3){
background: green;
order: 3;
}
.flex{
display: flex;
flex-direction: row;
color: white;
}
.flex > div{
flex:0 1 auto;
}
应⽤上⾯的样式得到的结果如下图所⽰
可以看到 <div>第⼀个元素</div> 在 <div>第⼆个元素</div> 前，使⽤了flex中的oder属性之后可以很轻易的将其调换顺序。
}
.flex > div:nth-child(2){
background: lightblue;
order: 1;
}
.flex > div:nth-child(3){
background: green;
order: 3;
}
.flex{
display: flex;
flex-direction: row;
justify-content: center;
color: white;
background:#1BD1D1;
height: 100px;
margin: 0;
padding: 0;
}
.flex > div{
display: flex;
flex: 0 1 auto;
height: 50px;
width: 80px;
justify-content: center;
}
应⽤上⾯的样式可以得到⽔平居中的效果，如下所⽰
⽔平居中只需要将需要居中的flex容器的justify-content属性设为center即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。