css中两个class之间空格和没空区别

已于 2024-01-02 19:05:03 修改
阅读量862 收藏 4
点赞数 1
分类专栏： css 文章标签： css 前端 javascript
于 2023-02-13 14:27:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23135259/article/details/129008261
版权
文章讲述了在CSS中，选择器之间的空格差异对样式应用的影响。有空格的组合表示后代选择器，无空格则表示同时包含的类选择器。例如，.swiperA.swiperB.swiperC设置的背景色为红色，而.swiperA.swiperB.swiperC则是蓝色，显示了选择器语法在CSS布局中的重要性。
摘要由CSDN通过智能技术生成

有空格，代表:后代迭代选择器，

没有空格，代表：同时包含class

比如：

swiperC前面有空格

.swiperA .swiperB .swiperC{

background-color:red;

} 

swiperC前面没有空格 

.swiperA .swiperB.swiperC{

background-color:blue;

} 

A区域背景色会是红色

B区域背景色是蓝色

杨扬树
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html css中id和class的区别比较
12-13
HTML 和 CSS 是构建网页的基本工具，其中 `id` 和 `class` 属性是两种关键的选择器，用于为页面元素添加样式、实现特定的功能或者进行页面布局。了解它们的区别对于高效地编写网页代码至关重要。 首先，`id` 和 `...
div+css中Class与ID的区别
10-30
在 HTML 和 CSS 中，Class 和 ID 是两个常用的选择器，用于选择和样式化网页元素。然而，这两个选择器有着根本的区别，了解它们的差异非常重要。 首先，让我们从 Class 开始。Class 是一个可以在 HTML 元素中使用的...
标签元素的class属性包含空格的情况
liaozhongxiang的博客
09-25 1万+
标签元素的class属性有空格 今天练习js的一个样例时碰到了class属性中含有空格，不是太懂，于是就百度了一下，百度结果如下： <div class="box1 box2 textbox">这个div就被同时赋予了box1、box2、textbox这三个class类名，中间使用空格隔开。</div> 元素的class类名个数是没有限制的，如有需要可以设置N个，但是为了能够让浏览器识别，所以每个class之间要使用空格隔...
CSS中class之间的空格
zliang2010的专栏
08-07 2079
例如： Bold Italic 此时会被认为（.bold），（.buttons）同时作用于第一个SPAN。 两个类名的情况（类名中间空格），表示这一元素的样式是这两个类的组合。 通常是为了css样式表简洁，不重复，会把类里的样式写的更普遍一些，比如 .float_L{float:left;} .font_12{font-size:12px;} 某个元素需要浮动在左边，而
CSS元素之间的空白问题：原因与解决方案
最新发布
一起coding，一起嗨。
06-29 618
CSS元素之间的空白问题：原因与解决方案
Vue进阶（七十二）：css 样式中 逗号、空格、冒号、点号、~、＞的区别
IT全栈 华强工作室
09-09 5462
css中用逗号隔开表示两个不同类的样式类名用同一个样式； 空格隔开表示从属包含关系，是当前的元素子元素； 逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式。 比如下面的代码示例： <div class="content"> <span class="content-child">子内容</span> 内容</div> &lt...
vue中 class 和 :class 的使用
weixin_45547638的博客
07-21 3111
vue中 class :class 的 多个样式的写法注意不能写多个class。
CSS中两个类选择器有空格与没空格的区别
Vincent_Zhang233的博客
09-14 1062
CSS中两个类选择器有空格与没空格的区别
CSS实现段落首行缩进两个字符不再使用空格
09-25
在网页设计中，为了遵循传统的中文排版规则，通常我们需要在每个段落的开头留出两个汉字的空格。在HTML中，以往的做法是通过在段首插入空格或者使用特殊字符来达到这一效果，但这并不是一个理想的方法，因为它们可能...
css中style和class的加载顺序示例介绍
12-03
在CSS（层叠样式表）中，`style`和`class`都是用于定义元素的样式，但它们在加载和应用顺序上有所不同。本示例主要探讨`style`内联样式和`class`类选择器在HTML元素上的优先级和加载顺序。 首先，让我们了解一下...
css中id和class的定义格式、使用技巧及选择
01-19
而以class=bbb形式定义的，在css中应该这样设置其样式：.bbb{ 样式列表 }（注意前面有一个点） ID与CLASS的使用技巧 1. 子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。2. CLASS中的子级...
css类名中间有空格和没有空格之间的区别
qq_43654065的博客
01-26 1652
.box1 .box2 中间有空格表示后代选择器，当box2包裹在box1中生效，即 <div class="box1"> <div class="box2"></div> </div> .box1.box2 中间没有空格，同一个元素当同时包含这两个类名会有效果，即 <div class="box1 box2"></div> ...
【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）
热门推荐
【敦厚的曹操】的专栏
04-14 1万+
css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解 - 知乎对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。 1、>(大于号) 子元素选择器 >大于号的意思是 选择某元素后面的第一代子元素 案例<style type="text/css"> h1&…https://zhuanlan.zhihu.com/p/180011240 对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。
CSS - 类选择器: 中间有空格和没有空格的情景
weixin_45871977的博客
05-12 127
CSS - 类选择器: 中间有空格和没有空格的情景
CSS中两个class之间有空格和没空格的区别
书香水墨
02-07 1005
一、有空格 有空格表示后代选择器，选择的是.example内的.children .example .children { color: orange; } <p class="example"> <p class="children">children</p> </p> 二、没有空格 没有空格表示.example.children在一个元素上，该元素必须同时又这两个class才生效 .example.children { color: or
css的选择器-逗号、空格分隔和连写的区别
Alive_m的博客
10-30 2270
css的选择器-逗号、空格分隔和连写的区别
css 中两个class之间没有空格与有空格有什么区别
az44yao的专栏
06-23 270
css 中两个class之间没有空格与有空格有什么区别
定位class时空格注意
weixin_30908707的博客
07-12 116
class属性中间的空格并不是空字符串，那是间隔符号，表示的是一个元素有多个class的属性名称，那定位的时候取其中的一个就行（并且要唯一） Selenium2+python自动化73-定位的坑:class属性有空格【转载】 转载于:https://www.cnblogs.com/vanoraxnc/p/9298782.html...
(十三)学习CSS之两个class连一起隔空格和逗号
06-12
当一个元素需要同时应用两个 class 样式时，可以使用两个 class 名连在一起，用空格隔开，如下所示： ```html <div class="class1 class2"></div> ``` 这样就可以同时应用 class1 和 class2 的样式。 如果需要将两个 class 样式同时应用在多个元素上，可以使用逗号隔开，如下所示： ```html <div class="class1, class2"></div> <p class="class1, class2"></p> ``` 这样就可以将 class1 和 class2 的样式同时应用在多个元素上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值