浅谈CSS选择器中的空格
HTML文档是一棵树的结构,各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素,要么是另一个元素的父元素,要么是另一个元素的子元素,这样,各元素之间就形成了‘父子关系’。基于这样的关系模型,CSS定义了后代选择器(descendant selector)也称为上下文选择器(contextual selector)。
后代选择器的写法为,子代元素以空格与父元素形成连接关系构成选择器,如:
以上规则的结果为:“作为div元素后代的任何span元素显示为蓝色字体”。
选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”,但是要求必须从右向左读选择器——《CSS权威指南》第三版
CSS还有两种选择器:类选择器和ID选择器,个中细则不是本文陈述的重点。本文的重点是:空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题,及解决方式。
先看看以下的规则:
以上规则的结果为:“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样,我的要求是:“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则:
以上规则的改进之处为'div'与'.blue'之间多了一个空格,这样是否就能形成后代选择器呢?答案是否定的!该规则实现的结果依旧是:“所有class属性值为blue的div元素显示为蓝色字体”。
那么该怎么结合类选择器构成后代选择器的效果呢?方法是有的,那就是给父元素div设置一个class或者id属性,假设我给它加上一个class属性,于是规则就变为:
以上规则的结果为:“所有class属性值为contain的div元素,其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求,但已经很接近了。接近了,效果一定是很明显的,然而我却发现完全没有了蓝色字体,因为我把规则写为:
以上规则的不同之处在于,'.contain'与'.blue'之间少了一个空格!少了空格,以上选择器就不是后代选择器了,而是另外一种选择器:“多类选择器”。
在HTML中,一个class值中有可能包含一个词列表,各个词之间用空格分隔。那么以上的多类选择器只能将规则应用于如下形式的元素中:
以上的class属性值少了其中一个都无法将字体显示为蓝色!
将以上规则放在一起,比较起来会清晰一点:
2div.contain.blue{color:blue;}/*多类选择器*/
以上两种规则分别应用的元素如下:
2<divclass="containblue">containandblue</div><!--多类-->
值得注意的是:ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素:
以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔,构成后代选择器。
综上,选择器之间的空格是一种结合符,如果要构成后代选择器,则空格两边的选择符必须为如下两种形式:
- 元素选择符 空格 元素选择符
- 非元素选择符 空格 非元素选择符
后代选择器中绝对不可能出现的一种情形:元素选择符 [空格] 非元素选择符。
最重要一点:两个类选择器之间存在空格则构成后代选择器,之间没有空格的则构成多类选择器。
Thanks: http://www.cnblogs.com/mophee/archive/2009/03/12/1409562.html
浅谈CSS选择器中的空格相关推荐
- html 怪异模式,CSS_浅谈CSS编程中的怪异模式,怪异模式盒模型
今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式 怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
- html中加一个空行,浅谈HTML代码中的空格和空行
HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格. 例子1:(文本内容中的连续空格) 代码 XML/HTML Code复制内容到剪贴板 这段文本中,输入连续的空格 ...
- html怪异模式是什么,浅谈CSS编程中的怪异模式
怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式, ...
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上,如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍 选择器权重 字体属性 文本属性 元素分类 display属性: 块状元素 行内元素 行内块元素 盒模型 内边 ...
- 浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...
- html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
- css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
最新文章
- Linux/CentOS优化配置 汇总
- “快准顺”而不是“信达雅”
- 信息学奥赛一本通(1121:计算矩阵边缘元素之和)
- ios中获取一个唯一的字符串(利用UUID)
- DES, TripleDES and BlowFish in Silverlight
- 12. nc/netcat 用法举例
- C++ 访问成员 “->“还是“.“
- 2017计算机基础模拟试题,2017年计算机一级考试PS及基础模拟多选试题
- 互联网教育:玩法与困境
- JVM底层原理分析 + 性能调优
- leetcode 739 解法思路
- 使用RMF报表设计器进行报表设计
- 使用UltraISO刻录自己的音乐CD步骤
- 手机信令数据怎么获得_运用手机信令数据研究大都市区空间结构 ——以南昌大都市区为例...
- matlab爆炸建模,7.2.5萨墓基尔加丹M螺旋爆炸技能建模分析
- 【单片机】51单片机使用总结
- 所在位置 行:1 字符: 1+ cnpm i+ ~~~~ + CategoryInfo : SecurityError: (:) [],PSSecurityExcepti
- 从零开始,带你掌握空状态设计的正确方法
- k1658停运到什么时候_k1658列车到龙川一般会晚点吗因为我要转车时间只有四十分钟...
- 基于RSA和AES混合加密实现的加解密小工具
热门文章
- 【温故而知新-Javascript】图片效果(图像震动效果、闪烁效果、自动切换图像)...
- sql命令(四)-操作数据表中的记录
- Scala 入门学习
- jquery各类资源整理
- SQL Server 2012入门T-SQL基础篇:(10)UPDATE语句
- EVEREST Ultimate Edition 4.50 Build 1330 Final
- 生成网上下载的EF项目对应的数据库
- 快速上手Spring WebFlux框架
- 侣信即时通讯系统全新发布
- 《企业大数据系统构建实战:技术、架构、实施与应用》——第1章 企业大数据战略定位 1.1 宏观...