前言
>、~、+、空格、逗号，这些 CSS 符号的用法，不仅是新手，就连非常多初级工程师都搞不清楚她们的用法。倘若你是新手那还说的过去，毕竟刚接触，乃至与还无接触到，不晓得、不会用这很正常。若你做为初级工程师，已然步入工作岗位、入门了，这些常用的 CSS 符号都不熟悉乃至不晓得，就很不该该了。从这就能说明你在学习的时候不认真或缺乏练习，这针对编程来讲属于是大忌。
扯远了，今天我就带大众来仔细认识一下它们的用法。
子元素选取器（>）
子元素选取器（>）暗示的是选取该元素后面的第1代子元素，咱们来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大于号的运用</title>
<style type="text/css">
.parent>div {
width: 200px;
height: 100px;
bac公斤round-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div></div>
</div>
<div class="parent">
<ul>
<li>
<div></div>
</li>
</ul>
</div>
</body>
</html>
如上代码和效果图所示，我给 .parent 的第1代子元素 div 设置了宽高和背景色，因为我是用了 > 符号进行操作的，因此仅在第1代子元素中生效，它的孙子代、重孙子代以及之后的子代都不生效，这便是 > 的用法。
浪花号（~）
~ 的功效是选取该元素之后的所有相同元素，咱们来看一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浪花号的运用</title>
<style type="text/css">
h1~div {
width: 200px;
height: 60px;
bac公斤round-color: skyblue;
}
</style>
</head>
<body>
<div class="parent">
<div>第1个DIV</div>
<h1>我是标题一</h1>
<h2>我是标题二</h2>
<div>第二个DIV</div>
<span>我是span</span>
<input type="text" name="testIpt" value="我是输入框">
<div>第三个DIV</div>
</div>
</body>
</html>
| 
发表于 2024-6-30 06:39:59
