CSS选择器介绍和优先级

CSS选择器介绍和优先级

选择器权重及优先级

权重分为四级，权重值越大优先级越高。

1. 内联样式。如：style=“xxx”，权值为1000
2. ID选择器。如：#content，权值为100
3. 类，伪类和属性选择器。如：.content,:hover,[attribute],权值为10
4. 元素选择器，伪元素选择器。如：div,p,权值为1

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

【以上摘自网络】

---

内联样式

<h1 style="color: red;">CSS选择器</h1>

---

ID选择器

css

 #ID_choose{
        color: black;
 }

html

<h1 id="ID_choose" >CSS选择器</h1>

---

类选择器

css

 #Cls_choose{
        color: yellow;
 }

html

<h1 class="Cls_choose" >CSS选择器</h1>

---

元素选择器

css

 h1{
        color: green;
 }

html

<h1  >CSS选择器</h1>

---

面试题:

文本”Hello, world.”显示的颜色是?

<style>
    #content .text {text-color:red;}
    #content>.title {color:green;}

    #content div.title {font-color:blue;}

    strong {font-color:yellow;}

    * {color:black;}

</style>

<div id="content">

    <span class="text"><strong class="title">Hello, world.</strong></span>

</div>