天涯论坛

 找回密码
 立即注册
搜索
查看: 84|回复: 5

CSS 中 >、~、+ 、空格、逗号的用法

[复制链接]

2991

主题

330

回帖

9919万

积分

论坛元老

Rank: 8Rank: 8

积分
99199252
发表于 2024-6-30 06:39:59 | 显示全部楼层 |阅读模式

前言

>、~、+、空格、逗号,这些 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>




上一篇:css中“&gt;”(大于号)、&quot;~&quot;(浪花号)、&quot; &quot;(空格)、&quot;,&quot;(逗号)、&quot;+&q
下一篇:实操代码带你理解CSS中的常用选取器(你值得把握!)
回复

使用道具 举报

1

主题

996

回帖

-3

积分

限制会员

积分
-3
发表于 2024-9-5 23:39:59 | 显示全部楼层
你的话语如春风拂面,让我心生暖意。
回复

使用道具 举报

9

主题

770

回帖

10

积分

新手上路

Rank: 1

积分
10
发表于 2024-9-9 23:42:32 | 显示全部楼层
说得好啊!我在外链论坛打滚这么多年,所谓阅人无数,就算没有见过猪走路,也总明白猪肉是啥味道的。
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-10 01:14:49 | 显示全部楼层
你的话语如春风拂面,让我感到无比温暖。
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-9-26 18:36:41 | 显示全部楼层
对于这个问题,我有不同的看法...
回复

使用道具 举报

3048

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109040
发表于 2024-10-12 21:24:47 | 显示全部楼层
百度seo优化论坛 http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 05:49 , Processed in 0.115348 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.