浅谈CSS选择器中的空格
来源:互联网 发布:软件开发工程师 英语 编辑:程序博客网 时间:2024/06/06 03:40
后代选择器的写法为,子代元素以空格与父元素形成连接关系构成选择器,如:
以上规则的结果为:“作为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属性值少了其中一个都无法将字体显示为蓝色!
将以上规则放在一起,比较起来会清晰一点:
2
以上两种规则分别应用的元素如下:
2
值得注意的是:ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素:
以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔,构成后代选择器。
综上,选择器之间的空格是一种结合符,如果要构成后代选择器,则空格两边的选择符必须为如下两种形式:
- 元素选择符 空格 元素选择符
- 非元素选择符 空格 非元素选择符
后代选择器中绝对不可能出现的一种情形:元素选择符 [空格] 非元素选择符。
最重要一点:两个类选择器之间存在空格则构成后代选择器,之间没有空格的则构成多类选择器。
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- CSS选择器中的空格
- CSS | css类选择器中的空格
- CSS选择器中的空格的不同作用
- 浅谈CSS中的几种选择器
- CSS选择器中的空格与尖括号有何区别?
- 浅谈css选择器
- JQuery选择器中的空格问题
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?
- CSS中的选择器
- CSS 中的选择器总结
- css中的选择器
- 黑马程序员--java技术blog---第七篇:GUI
- 滑动文本标签,一个类解决广告轮播 UIScrollView
- 小白学开发(iOS)OC_ block数据类型(2015-08-08)
- COCOS2D-x添加图片按钮步骤总结
- 生物识别大PK:你该选择哪种生物识别方式?
- 浅谈CSS选择器中的空格
- C#重构经典全面汇总
- could not launch thie product because the associated workspace is currently
- linux下安装oracle 11g
- Android性能优化典范(一)
- iOS中storyboard故事板使用Segue跳转界面、传值
- 不要用子类!Swift的核心是面向协议
- 3531上用live555实现RTSP Server
- 可输入初始值得60进制计数器