12、CSS选择器 & CSS选择器优先级

2022-05-25 本文已影响0人小黄不头秃

一、概述

我们生活中的所有页面，所有网页。其精美的呈现往往离不开前端工程师们使用CSS这支画笔，给网页装饰的精美无比。其中有一个关键的问题，程序怎么知道哪个标签该显示什么样的颜色，哪个标签的字体多大呢？其中的奥秘就是CSS选择器了。CSS选择器可以选中网页中的标签，并对他们一一进行刻画，最终组成了一张精美的画卷。

二、选择器的分类

（1）id 选择器

每一个标签都要求有唯一的id，此属性可以用于CSS选择器选择。
例如：#blue{};#haha{}

#blue{
             color: blue;
         }

（2）元素选择器

使用标签的标签名进行选择。
例如：p{};h1{};h2{};div{}

p{
             color:red;
         }

（3）class 选择器

在标签中设置标签的class属性（可以重复），用过使用 . + class名，选中。
例如：.haha{}；.nimei{}

.class_name{
             color:red;
}

（4）通配选择器

所有元素：*{}

*{}

（5）交集选择器

交集选择器：选中同时符合多个条件的元素选择器1选择器2{}

.green, .red{
            /* 交集选择器 */
            color: gray;
        }

（6）并集选择器

并集选择器：同时选择多个选择器选择器1，选择器2{}

div.red{
            /* 并集选择器 */
            font-size: 40px;
}

（7）关系选择器

子元素选择器：父元素> 子元素
后代选择器：中间使用空格
-兄弟选择器：使用+号表示下一个，~表示所有兄弟

<style>
         /*子元素选择器：父元素> 子元素*/
         div.box>p{
             color: hotpink;
         }
         /* 后代选择器 :空格*/
         div.houdai p.hd span.hd{
             color: skyblue;
         }
         /* 兄弟选择器 :加号表示下一个，~表示下边所有*/
         p.bro2 ~ p{
            color: yellow;
         }
         p.bro1 + p{
             color: purple;
         }
</style>

<body>
    <!-- -----------------交/并选择器--------------------- -->
    <span class="sky">first</span>
    <div class="red">i am a div!</div>
    <p id="red">i am a p!</p>
    <br><br><br>
    <!-- -----------------子选择器--------------------- -->
    <div class="box nihao">
        我是一个div
        <p>
            我是div中的p元素<br>
            <span>
                我是div-p中的span元素！
            </span>
        </p>
        <span>我是div中的span元素</span>
    </div>
    <br><br><br>
    <!-- -----------------后代选择器--------------------- -->
    <div class="houdai">
        i am  div grandfather.
        <p class="hd">
            i am span's father.<br>
            <span class="hd">
                i am p's son.
            </span>
        </p>
    </div>
    <br><br><br>
    <!-- -----------------兄弟选择器--------------------- -->
    <div class="dad">
        here is the father!
        <p class="bro1">here is bro1!</p>
        <p class="bro2">here is bro2!</p>
        <p class="bro3">here is bro3!</p>
        <p class="bro4">here is bro4!</p>
    </div>
</body>

（8）继承样式

样式的继承：给父标签设置的属性会发生在子标签里面
所有的都会被继承，背景，布局，字体颜色，字体大小……
继承的设计是为了方便开发；利用继承可以将一些通用的样式设置到一起

body{
             /* 子元素也会有相应格式，但子元素如果也设置了相关样式，则会将原来的样式覆盖 */
             font-size: large;
         }

三、选择器优先级

样式冲突：就是有多个不同的设置对同一个对象设置
优先级：内联样式->id->class（伪类）->元素选择器 ->通配选择器-> 继承样式.
注意：

每一条css语句都要有;结尾
当多种样式重复定义时，会根据优先级进行覆盖。