Web前端最全Vue进阶（七十二）：css 样式中 逗号、空格、冒号，面试官不录用你的暗示

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

    <span class="content-child">子内容</span>
内容</div>
<div class="conter">内容2</div>
<style>
    .content .content-child{
        color:red;//空格隔开表示在类content下的类样式.content-child的样式被改变了
    }
    .content,conter{
        color:#ffd014;//逗号表示在不同的类下，样式都被改变。
    }
</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190909202420257.png)


### 二、css 中逗号，空格，冒号，点号的含义


比如：


一：`#a,b{…………｝`


二：`#a b{…………｝`


三：`#a:b{…………｝`


四：`#a.b{…………｝`


这是四个分别代表着什么含义呢？


一、一个id叫a和一个标签是b的样式


二、一个id叫a下面的一个标签是b的样式


三、一个id叫a的伪类b，例如：`a:hover`


四、一个id叫a的下面的class叫b的样式


`css`中“`~`”作用域为同一父元素下的所有子元素，例如为所有相同的父元素中位于 `p` 元素之后的所有 `ul` 元素设置背景：

p~ul{
　　background:#ff0000;
}

快乐生活

• 　　
• 生活
• 　　
• 生活
• 　　
• 生活

`p~ul` 选择前面有 `<p>` 元素的每个 `<ul>` 元素。


两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。


`css`中“`>`”是`css3`特有的选择器，`A>B` 表示选择A元素的所有子B元素。


与`A B`的区别在于，`A B`选择所有后代元素，而`A>B`只选择一代。


* `.a,.b`｛逗号指相同的css样式};
* `.a .b`｛空格指后代元素｝；
* `.a>.b`｛大于号指子代元素｝；


若想获取某一元素后的所有子元素，可以使用如下语句：


### 最后

![前15.PNG](https://img-blog.csdnimg.cn/img_convert/e11a56d09945506ce748a00728b5203c.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/2fe739e44c10f640ad0645d49602b506.webp?x-oss-process=image/format,png)

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**



[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**