CSS常用选择器优先级

最新推荐文章于 2024-05-11 18:05:32 发布

weixin_46802567

最新推荐文章于 2024-05-11 18:05:32 发布

阅读量254

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46802567/article/details/112686543

版权

1.单个选择器优先级：
1.1 !important

div{
	color:gray !important;
}

<body>
<div>明月几时有 把酒问青天</div>
</body>

在这里插入图片描述

1.2 内联样式 style

<body>
	<div style="color: gray;">
			三十功名尘与土，八千里路云和月
	</div>
</body>

在这里插入图片描述

1.3 ID选择器 #id{ }

#baiqi{
	color: gray;
}

<body>
	<div id="baiqi">
		身在黑暗，心向光明
	</div>	
</body>

在这里插入图片描述

1.4 类选择器 .class{ }

.player{
		color: gray;
}

<body>
	<div class="player">
		幸甚至哉，歌以咏志
	</div>
</body>

在这里插入图片描述

1.5 属性选择器 a[属性名]{ }

[title]{
		color: gray;
}

<body>
	<div title="person">
		决定了内心的正道，便绝无动摇
	</div>	
</body>

在这里插入图片描述

1.6 伪类选择器 :hover{ }

a:link {color:pink;}      /* 未访问链接*/
a:visited {color:gray;}   /* 已访问链接 */
a:hover {color:yellow;}   /* 鼠标移动到链接上 */
a:active {color:green;}   /* 鼠标点击时 */

<body>
	<p>
		<a href="javascript:;" target="_blank">到达胜利之前，无法回头</a>
	</p>
</body>

在这里插入图片描述

1.7 伪元素选择器 ::before{ },::after{ }

p::before{
		content: '羽扇纶巾 ';
		color: pink;
}
p::after{
		content: ' 樯橹灰飞烟灭';
		color: yellow;
}

<body>
	<p>谈笑间</p>
</body>

在这里插入图片描述

1.8 标签选择器 span{ },div{ }

p{
	color: gray;
}

<body>
	<p>人生自古谁无死 留取丹心照汗青</p>
</body>

在这里插入图片描述

1.9 通配选择器 { }

*{
	color: pink;
}

<body>
	<div>凭谁问</div>
	<p>廉颇老矣</p>
	<form>尚能饭否</form>
</body>

在这里插入图片描述

2.复合选择器比较：

2.1CSS权值：

内联样式表权值为1000;

ID选择器的权值为100;

Class类选择器的权值为10;

HTML标签选择器的权值为1;

2.2 事例

em{
	color: gray;	/* 1 */
}
p em{
	color: yellow;	/* 1+1=2 */
}
.palyer em{
	color: blue;	/* 10+1=11 */
}
#libai .player em{
	color: pink;	/* 100+10+1=111 */
}

<body>
	<div id="libai">
		<p class="palyer">
			<em>一篇诗，一斗酒，一曲长歌，一剑天涯</em>
		</p>
	</div>
</body>

在这里插入图片描述 2.3 注意
每个权值有非常严谨的层次关系，不可以轻易向上一级突破。
简单理解：一个标签指向单个类选择器（总权值为10），同时指向由100个标签选择器组成的复合选择器（总权值为100），最终还是会使用到类选择器的样式。

总结：
1.！important优先级最高
2.单个选择器的优先级：内联样式选择器， ID选择器，类选择器，属性选择器，伪类选择器，伪元素选择器，标签选择器，通配选择器，
3.多个选择器优先级的比较要运用到选择器的权值
4.选择器的权值层次分明，难于向上一级突破

weixin_46802567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用选择器优先级

1.单个选择器优先级：1.1 !importantdiv{ color:gray !important;}<body><div>明月几时有把酒问青天</div></body>1.2 内联样式 style<body> <div style="color: gray;"> 三十功名尘与土，八千里路云和月 </div></body>1.3 ID选择器 #id{ }#
复制链接

扫一扫