CSS选择器与优先级详解-优快云博客

本文详细介绍了CSS选择器的类型及其优先级规则，包括内联样式、ID选择器、类选择器、元素选择器等，通过实例解析了不同选择器的权重，并给出了一道面试题供读者练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS选择器介绍和优先级

选择器权重及优先级

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

内联样式。如：style=“xxx”，权值为1000
ID选择器。如：#content，权值为100
类，伪类和属性选择器。如：.content,:hover,[attribute],权值为10
元素选择器，伪元素选择器。如：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>

转载于:https://www.cnblogs.com/hunterxing/p/10454882.html