CSS 中 > 大于号、~ 波浪号、" " 空格、"," 逗号、"+" 加号都是干什么的?

教程与解决方案问答分类: 计算机相关CSS 中 > 大于号、~ 波浪号、" " 空格、"," 逗号、"+" 加号都是干什么的?
0
前端开发 提问于 2月 以前

CSS 中 >、~、” “、,、+ 加号都是干什么的?怎么用

1 个回答
2
前代选择器 回答于 2月 以前

对新手来说,在布局中通常搞不清这些符号的用法,今天就来为大家详细讲解一下。

1、>(大于号) 子元素选择器

>大于号的意思是 选择某元素后面的第一代子元素。案例:

<style type="text/css">
	h1>strong {
		color: red;
	}
</style>

<body>
	<h1>
		<strong>一代子元素</strong>
	</h1>
	<h1>
		<span>
			<strong>二代子元素</strong>
		</span>
	</h1>
</body>

2、~(波浪号)

~波浪号的意思是 选取 某个元素之后的所有相同元素

.box~h2 这句就是 选取 .box 后面所有的 h2

这个选择器 两种元素必须处于同一个父元素内,被选取的元素不必直接紧随。

<style type="text/css">
	.box~h2{
		background: aqua;
	}
</style>

<body>
	<div class="box"></div>
	<h2>1</h2>
	<em>2</em>
	<h2>3</h2>
	<h2>4</h2>
</body>

3、(空格) 派生选择器

选择某元素后面的所有子元素,派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

这里还是用第一个例子:

<style type="text/css">
	h1 strong {
		color: red;
	}
</style>

<body>
	<h1>
		<strong>一代子元素</strong>
	</h1>
	<h1>
		<span>
			<strong>二代子元素</strong>
		</span>
	</h1>
</body>

4、,(逗号)群组选择器

可以对选择器进行分组,被分组的选择器就可以分享相同的声明

<style type="text/css">
	h1,h2,h3{
		color: blue;
	}
	h4,h5,h6{
		color: red;
	}
</style>

<body>
	<h1>案例1</h1>
	<h2>案例1</h2>
	<h3>案例1</h3>

	<h4>案例2</h4>
	<h5>案例2</h5>
	<h6>案例2</h6>
</body>

5、+(加号)相邻兄弟选择器

可选择紧接在另一元素后的元素,且二者有相同父元素

<style type="text/css">
	span+em{
		color: red;
	}
</style>

<body>
	<h1>
		<span>案例1</span>
		<em>案例2</em>
	</h1>
</body>

你的回答

3 + 19 =