385day(选择器复习补充，并集，伪类,显示模式复习)

最新推荐文章于 2024-04-30 11:57:02 发布

原创最新推荐文章于 2024-04-30 11:57:02 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS中的选择器应用，包括交集、并集及伪类选择器，同时复习了链接的不同状态样式设置。通过具体示例，讲解了如何使用display属性控制元素的显示模式，如inline-block的运用，以及背景图片的切换效果。

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

《2018年10月23日》【连续385天】

标题：选择器复习补充，并集，伪类,显示模式复习；
内容：

<div class="ed"></div>
	<span>1</span>
	<div>2</div>
	<p>3</p>
	<a href="https://www.taobao.com" target="_blank">链接</a>

/*交集选择器*/
div.ed{

}

/*并集选择器*/
div , p , span{

}

/*伪类选择器*/

/*未访问的链接*/
a:link{
	color: #3c3c3c;
	font-size: 25px;
	text-decoration: none;
}

/*已访问的链接*/

a:visited{
	color: green;
}

/*鼠标经过链接时候的样子*/
a:hover {
	color: #f10215;
}

/*鼠标按下时候的样子*/
a:active {
	color: orange;
}

<div class="nav">
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
	</div>

* {
	margin: 0;
	padding: 0;
}

.nav{
	text-align: center;
}

.nav a{
	display: inline-block;
	height: 50px;
	width: 120px;
	text-align: center;
	background-image: url(bg1.png);
	text-decoration: none;
	color: #fff;
	line-height: 50px;
}

.nav a:hover{
	background-image: url(bg2.png);
}