Vue进阶(七十二):css 样式中 逗号、空格、冒号、点号,前端开发关键技术

36 阅读2分钟

最后

开源分享:docs.qq.com/doc/DSmRnRG… 逗号隔开表示并列关系,两者之间没有任何关系,可以使用同一个样式。

比如下面的代码示例:

  <div class="content">
        <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>

在这里插入图片描述

二、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>快乐生活</p>
<ul>
  <li>生活</li>
  <li>生活</li>
  <li>生活</li>
</ul>

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{大于号指子代元素};

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

element1 > \* {
    // CSS样式


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**