CSS中多个选择器之间有无空格的区别

最新推荐文章于 2021-02-19 11:17:26 发布

转载最新推荐文章于 2021-02-19 11:17:26 发布 · 930 阅读

本文详细解析了CSS中两种特定选择器的应用方式：一种是当元素同时拥有特定ID和类名时生效的选择器；另一种是在特定ID下的子节点中含有指定类名时才生效的选择器。

#content.div {color:#f00;}

#content .div {color:#f00;}

第一行：表示ID是content并且同时类名是div的选择器,此时才能生效

第二行：表示ID是content下子节点元素中含有类名为div的选择器,此时才能生效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hello_xiaozhao

关注关注

2
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

十五道css面试题

m0_65450343的博客

04-25

7151

目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 中哪些属性可以继承？ 3.CSS3 新增伪类有那些？ 4、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？ 5、浏览器是怎样解析 CSS 选择器的？ 6、在网页中应该使用奇数还是偶数的字体？为什么呢？ 7、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] 8、为什么不建议使用统配符初始化 css 样式。 9、如果需要手动写动画，你认为最小时间间隔是

CSS设计指南---CSS工作原理

weixin_40794404的博客

06-23

873

CSS设计指南---CSS工作原理教材: CSS设计指南

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

CSS3---结构性伪类选择器—empty

diyinjiao1404的博客

05-04

212

结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： 我是一个段落 </p&...

css中两个类选择器之间有没有空格的区别：

weixin_43706224的博客

05-24

984

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&amp

CSS | css类选择器中的空格

Uching的博客

11-09

3626

导读：有时候遇到css类选择器中间没有空格的，应用两个类样式都有效果，但是加个空格在类选择器中间，有的样式就没有效果了，这是为什么呢？？无空格.m-nav.nav-expanded {} 这两个样式同级，class中同时有.m-nav和.nav-expanded才能应用到这个选择器中的样式//less .m-nav { &.nav-expanded {} }有空格.m-nav .nav-

浅谈CSS选择器中的空格

weixin_30596343的博客

03-12

338

HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如...

CSS选择器：#id和.class中间有空格和无空格的区别

CHENJIAJIE

11-08

4139

相信大家都知道 .class1 .class2 和 .class1.class2 是两种不同的选择规则，但具体怎样不同呢？首先中间有空格的情况：是选择到.class1类下的.class2类子节点，即.class2类的节点要是.class1类子节点 .class1 { color: black; } .class1 .class2 { color: red; } I'm class1

104道 CSS 面试题

无心玩编程的博客

11-13

1583

104道 CSS 面试题（给前端大全加星标，提升前端技能）作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？[1] 2.CSS 选择符有哪些？[2] 3.::before

CSS-Cascading Style Sheet_层叠样式表_用法详解

qq_31455841的博客

09-26

2945

CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表 1. 专门用来为HTML标签添加样式 2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等 3. 层叠属于CSS的三大特性之一 4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 2. CSS 使用目的 1. CSS 之前在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单

掌握jQuery核心：从选择元素到事件操作的完整笔记

“链式操作”则是jQuery最具特色的编程风格之一：每一个方法调用后都会返回更新后的jQuery对象，使得多个操作可以连缀成一行代码，如$('#box').hide().delay(200).fadeIn().css('color','red')，不仅简洁美观，而且...

CSS选择器中的空格

ginny_mjy的博客

08-17

3177

今天工作时同事问写css选择器时加空格与不加空格的区别。由于我一直用的后代选择器，于是就以为没有任何区别。为保险起见查了一下百度，竟然是有区别的。 div.contain .blue{color:blue;} div.contain.blue{color:blue;} 以上两种规则分别应用的元素如下： 1  <div class="contain">containblue 2

css类选择器-有无空格的差别

Void的博客

02-19

162

有空格表示后代选择器——有层级关系 .parent .child{ } //表示类parent下所有的child类无空格表示同级，即该元素需要同时含有这两（多）者 .brother.sister{ } 该元素需要同时含有brother和sister两类

css中两个类选择器之间有没有空格的区别

Night_Emperor的博客

09-25

5062

css中两个类选择器之间有没有空格的区别： .div1.div2{width: 100px;height: 100px;background: red;}/*多类选择器*/ .div1 .div2{width: 100px;height: 100px;background: yellow;}/*后代选择器*/

两个类选择器之间是否有空格的区别

柱子柱子柱子钰的博客

08-04

1694

有空格如：.class1 .class2{} 即选择class1的后代选择器class2。没空格如：.class1.class2{} 即选择同时带有class1和class2的多类节点。

CSS中空格和>区别，A B, A>B

u010552788的专栏

03-13

6418

转自点击打开链接 ---------------------- 这些是CSS3特有的选择器，A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。另外：没有 A+B表示HTML中紧随A的B元素。 nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一

多个css类选择器使用规则