css “ . ” 选择器空格被坑小记

最新推荐文章于 2022-10-30 19:24:20 发布

到中流遏飞舟

最新推荐文章于 2022-10-30 19:24:20 发布

阅读量441

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38746380/article/details/84985236

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景：调试公司项目网页样式的时候，发现前人写的样式是 .class1.class2 的样子，感觉还是中间加个空格比较好看，这一改不要紧，页面乱了。乱了。。。在这里插入图片描述
但是，本菜鸡怎么能轻言放弃呢，先把东西还原回去（嘿嘿）。然后写个小总结。就在下面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.c1 {
				width : 100px;
				height : 100px;
				background: greenyellow;
			}
			.c1 .c1_1{
				width : 30px;
				height : 30px;
				margin: 10px;
				background: gainsboro;
			}
			/**
			.c1 .c1_1.c1_2 {
				width: 20px;
				height: 20px;
				margin : 10px;
				background: black;
			} */
			
		</style>
	</head>
	<body>
		<div class="c1">
			<div class="c1_1"></div>
			<div class="c1_1 c1_2"></div>
		</div>
	</body>
</html>

效果是这样的
在这里插入图片描述
放开注释，效果是这样的

**

可以看出，“ . ” 选择器之前有空格取得是子元素 , “.” 选择器之前没有空格取得是同时拥有这两种class的元素。

到中流遏飞舟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css “ . ” 选择器空格被坑小记

背景：调试公司项目网页样式的时候，发现前人写的样式是 .class1.class2 的样子，感觉还是中间加个空格比较好看，这一改不要紧，页面乱了。乱了。。。但是，本菜鸡怎么能轻言放弃呢，先把东西还原回去（嘿嘿）。然后写个小总结。就在下面。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
复制链接

扫一扫