小和尚学习-CSS选择器

最新推荐文章于 2020-07-31 21:06:29 发布

一叶小和尚

最新推荐文章于 2020-07-31 21:06:29 发布

阅读量526

点赞数

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

本文链接：https://blog.csdn.net/weixin_42417806/article/details/102425955

版权

本文介绍了CSS选择器的基础知识，包括ID选择器、元素选择器、类选择器、属性选择器、伪类和伪元素选择器。还详细讲解了组合选择器，如后代选择器、子代选择器、相邻兄弟选择器和兄弟选择器。最后，探讨了CSS层叠原理，包括重要性、特殊性和源次序在解决样式冲突时的作用。

摘要由CSDN通过智能技术生成

在这里插入图片描述

希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德

通过#id值定位元素，全局中的id值是唯一的

<div id="demo">id选择器<div>

/* id为demo的元素，字体颜色设置为红色 */
#demo {
   
	color: red;
}

通过元素类型名称定位元素

<p>元素选择器</p>
<p>元素选择器</p>
<p>元素选择器</p>

/* p元素，字体颜色设置为红色 */
p {
   
	color: red;
}

通过.class值定位元素，可以设置多个

<div class="demo">类选择器</demo>
<div class="demo">类选择器</demo>
<div class="demo">类选择器</demo>

/* 类名为demo的元素，字体颜色设置为红色 */
.demo {
   
	color: red;
}

通过[属性名=属性值]来定位元素

属性	说明
[attr]	选中带有attr属性的元素
[attr=value]	选中带有attr属性，且属性值为value的元素
[attr^=value]	选中带有attr属性，且属性值为以value开头的元素
[attr$=value]	选中带有attr属性，且属性值为以value结尾的元素
[attr*=value]	选中带有attr属性，且属性值为