小记CSS中逗号和空格的区别

最新推荐文章于 2025-05-10 22:29:14 发布

原创最新推荐文章于 2025-05-10 22:29:14 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

HTML/CSS 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了CSS中不同选择器的应用方式，包括如何针对特定类或元素进行样式设置。通过实例展示了p.center、p .center及p,.center的选择器差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下:

p.center 代表所有class="center"的p标签

p .center 代表所有class="center"的p元素的子元素

p,.center 代表所有p元素和所有class="center"的元素

p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">我是标题h1</h1>
<p class="center">我是段落p</p> 
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

马大头

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS中＞,+,~，空格，逗号等符号的使用

m0_48982503的博客

08-19

6175

目录 ~(波浪号) ： +(加号）： >(大于号)：空格： , 逗号：其中,+,~均为CSS3特有的选择器。 ~(波浪号) ： p~ul选择器 p之后出现的所有ul。两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。 P~ul { background-color: pink; } <p>快乐生活</p> <ul> 　　 <li>昊昊&l...

CSS 样式里面的逗号和空格之间的区别

只为成功找方法不为失败找借口

09-24

2477

/*在css的类之间加逗号和空格的区别：逗号表示两者是平行关系，表示两者同时引用属性；而空格表示父子关系，后者是前者的子元素，后者引用样式*/ .icon_lists .icon{ font_size:100px; } 这里面 icon 是 icon_lists 的子类，也就是说，这个字体的设置只对 icon 起作用

参与评论您还未登录，请先登录后发表或查看评论

Web前端--HTML+CSS+JS新型冠状病毒射击小游戏_js射击小游戏源码

2401_84434331的博客

04-27

1183

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

css定义格式中逗号，空格，冒号，点号的含义

远有青山

01-06

1万+

css定义格式中逗号，空格，冒号，点号的含义比如：一：#a,b{…………｝二：#a b{…………｝三：#a:b{…………｝四：#a.b{…………｝这是四个分别代表着什么含义呢？一、一个id叫a和一个标签是b的样式二、一个id叫a下面的一个标签是b的样式三、一个id叫a的伪类b，好像也没见过

CSS中>,+,~，空格，逗号等符号的使用

az44yao的专栏

04-17

497

其中,+,~均为CSS3特有的选择器。 A>B{ }表示A标签的第一代子标签B。 .lableA>div{ background-color: red;} A~B{ }表示在A标签之后、与A标签具有相同父标签的兄弟B标签。 .test2~div{ background-color: red;} A+B{ }表示在A标签之后、紧挨着A标签的下一个...

CSS的选择器中：逗号、空格分隔和连写的区别

最新发布

coloma2012的博客

05-10

172

逗号分隔：就是只需要具备其中之一即可出现效果，二者是并列关系 $(this).find(".a,.c")空格分隔：就是二者是父子关系，是当前的元素子元素才会出现效果 $(this).find(".a .c")连写：就是需要同时具备才会出现效果 $(this).find(".a.b")

交互设计方法和思考过程小记

03-04

我常被问起：“你是做什么的？”“交互设计师。”“交互设计是做什么的？”我很尴尬的解释一堆：“！@#￥%…….”对方更是疑惑：”那…....”………网上搜到一张图...从产品开发流程中，交互设计上从产品经理接到需求，分

Beatles小记

03-02

这篇小记主要处于两方面考虑：首先，希望打破一提到海量数据分析，就只有hadoop基础上的一系列工具，更多的时候很多企业需要的是更轻量的设计（办喜酒杀猪杀鸡未必都要用一把刀），因此将开放平台基础分析组件重构...

CSS垂直居中技巧小记与HTML测试实例

CSS中的垂直居中方法在Web开发中，实现元素垂直居中的方法多种多样，主要分为以下几类： - **使用表格布局** 利用`display: table`和`display: table-cell`配合`vertical-align: middle`来实现垂直居中。这种...

css的选择器-逗号、空格分隔和连写的区别

Alive_m的博客

10-30

2490

css的选择器-逗号、空格分隔和连写的区别

CSS中的 “点“,“空格“,“＞“ ，“逗号”，“+ ”

12-30

1674

css中“>”是在子元素选择器中出现的:“>”是css3特有的选择器，表明class样式只作用于子级元素，对于子级再往下的元素则忽略不计，比如孙级的元素就会被忽略。只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。与 A B 的区别在于，A B选择所有后代元素，而A>B只选择一代。

＞、~、+、空格、逗号在 css中的用法

m0_64208453的博客

10-28

2292

css

css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“＞”（大于号）详解

yb305

07-24

1594

p~ul选择器 p之后出现的所有ul。　　两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。 css中“>”是: 　　css3特有的选择器，A>B 表示选择A元素的所有子B元素。　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。 .a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝； ...

css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ ＞ ”（大于号）是什么意思？

qq_34169240的博客

12-22

9071

1、群组选择器（','） 2、后代选择器（空格） 3、子元素选择器（'>'） 4、相邻兄弟选择器（'+'） 5、兄弟选择器（'~'）

在 CSS 选择器中，逗号（,）、空格（）和（无空格）区别

family20102010的博客

10-12

747

空格用于后代选择器（Descendant selector），它表示选择的是匹配左侧选择器的元素的后代（子、孙、曾孙等后代）中匹配右侧选择器的元素。空格分隔的选择器可以匹配同一棵 DOM 树中，具有特定层级关系的元素。逗号用于组选择器（Grouping selectors），它表示选择多个不同的选择器，并且为它们应用相同的样式规则。逗号分隔的选择器可以匹配不同的元素，但只有当元素匹配其中一个选择器时，样式才会被应用。值得注意的是，类选择器的顺序并不重要，只要元素的类名中包含所有类选择器的条件即可。

Vue进阶（七十二）：css 样式中逗号、空格、冒号、点号、~、＞的区别

IT全栈华强工作室

09-09

5634

css中用逗号隔开表示两个不同类的样式类名用同一个样式；空格隔开表示从属包含关系，是当前的元素子元素；逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式。比如下面的代码示例： <div class="content"> <span class="content-child">子内容</span> 内容</div> &lt...

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）