css中的选择符多选

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的选择符有很多种,其中之一就是多选选择符。多选选择符可以同时选取多个元素进行样式设置,大大提高了CSS代码的可读性和可维护性。多选选择符有几种形式,分别是逗号分隔符、空格分隔符和加号分隔符,下

CSS中的选择符有很多种,其中之一就是多选选择符。多选选择符可以同时选取多个元素进行样式设置,大大提高了CSS代码的可读性和可维护性。

多选选择符有几种形式,分别是逗号分隔符、空格分隔符和加号分隔符,下面我们来具体了解一下。

/* 逗号分隔符 */
	h1, h2, h3 {
		font-size: 18px;
		color: #333;
	}

	/* 空格分隔符 */
	.wrapper p {
		margin: 0;
		padding: 0;
	}

	/* 加号分隔符 */
	ul + p {
		margin-top: 20px;
	} 

逗号分隔符可以同时选取多个元素进行样式设置,如上面代码所示,将h1、h2、h3三个元素的字体大小和颜色同时设置。

空格分隔符可以选取并设置某一元素下所有子元素的样式,如上面代码中的.wrapper p,表示设置.wrapper下所有p元素的margin和padding。

加号分隔符可以选取某一元素相邻的下一个元素进行样式设置,如上面代码中的ul + p,表示选取与ul相邻的p元素并进行样式设置。

通过使用多选选择符,我们可以将代码精简化、可读性提高,同时使CSS样式更加规范和易于维护。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中的选择符多选

粉丝

0

关注

0

收藏

0

已有0次打赏