css写样式多个类名以及选择器多类名用法

最新推荐文章于 2024-05-20 18:40:16 发布

爱学习的小康

最新推荐文章于 2024-05-20 18:40:16 发布

阅读量3k

点赞数 1

文章标签： css javascript css3

本文链接：https://blog.csdn.net/wnk1997/article/details/125976267

版权

样式多个类名：

.intro .intro2 .intro3
{
margin-left:20px
}

从父到子一层一层的下去，.intro类里面的.intro2里面的.intro3样式，左边空20px

选择器多类名用法:

<div class="intro aaa">

div既用了intro样式又用了aaa的样式

下面贴下源码和显示：

<!DOCTYPE html>
<html>
<head>
<style>
.intro  
{
background-color:red;
}
.intro .intro2 
{
background-color:green;
}
.intro .intro2 .intro3
{
margin-left:20px
}
.aaa{
	font-size:30px
}
</style>
</head>
<body>
<div class="intro aaa">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
	<div class="intro2">
		<button class="intro3">
		</button>
	</div>
</div>
<button class="intro3">
</button>
<div class="intro2">
	<button/>
</div>	
<div class="intro">
	<p>My name is Donald.</p>
	<p>I live in Duckburg.</p>
	<div class="intro2">
		<button class="intro3">
		</button>
	</div>
</div>
</body>
</html>

在这里插入图片描述
上面的代码最外层div多了个aaa样式，字体被设置成了30px,下面的没设置就是默认的。
按钮套了三层，所以需要.intro .intro2 .intro3才能生效，如果光一个intro3是不能生效的

爱学习的小康

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css写样式多个类名以及选择器多类名用法

按钮套了三层，所以需要.intro.intro2.intro3才能生效，如果光一个intro3是不能生效的。从父到子一层一层的下去，.intro类里面的.intro2里面的.intro3样式，左边空20px。上面的代码最外层div多了个aaa样式，字体被设置成了30px,下面的没设置就是默认的。div既用了intro样式又用了aaa的样式。...
复制链接

扫一扫