CSS选择器实例(Day_three)

快扶我起来搬砖

于 2019-09-07 22:06:37 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML CSS 选择器

本文链接：https://blog.csdn.net/qq_38622363/article/details/100609033

前端专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了CSS中不同选择器的优先级问题，通过具体实例解释了ID选择器、类选择器及元素选择器的权重计算方式，以及如何决定最终应用到HTML元素上的样式。

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

例子

/*使用多的方式对一个标签进行更改颜色*/
#only{
	background-color: #FF0000;
}

.content em{
	background-color: green;
}

.wrapper > .content > .box{
	background-color: gray;
}
div.wrapper > [class="content"] > #only.box{
	background-color: gold;
}

<div class="wrapper">
    <div class="content">
        <em class="box" id="only">1</em><!--对这里进行上色-->
    </div>
</div>

不同横行的选择器修饰同一个标签，谁优先？

/* 100  +1 =101			101 > 20 所以p标签呈现红色				*/
 #idDiv p{
	background-color: red;
}
/*	10 	 +  10=20  */
.classDiv .classP{
	background-color: green;
}

<div class="classDiv" id="idDiv">
    <p class="classP" id="idP">1</p>
</div>

由此可得同一横行的选择器权重相加谁大，谁来修饰标签。