CSS中#testid.testclass与#testid .testclass的区别
2013-03-29 13:05
513 查看
在一些面试中常常会考到一些很奇怪但又比较基础的问题,就如本文所要讲述的css选择器使用上的一个细节。
如下css和html代码,你能说出哪块是啥颜色吗?(如果你看一眼就知道了,那么请随意~)
口说无凭,咱们程序员都是以实际测试为主,如下显示效果(其他html无关代码略)
对于#testid.testclass与#testid .testclass的区别,在我学习css的道路上并未遇到过,可能是因为我学的乱吧,但回头看看,自己琢磨下也是可以找到啥区别的,只是缺乏官方的解释(这个解释有空我去找找<偷懒了>,已经补充部分,见本文补充<文章末尾>)。
时间不多了,下面直接说下我的理解吧。
首先#testid.testclass,在id后紧跟点号和class的写法,那么表示是匹配id为testid的元素中再匹配class是testclass的元素。
最后#testid .testclass,在id后加空格然后跟上点号和class的写法,那表示匹配id为testid的元素,然后再在该元素的子孙元素中匹配class是testclass的元素。
PS:上面的#testid可以是其他如div标签、class(class前面要加点号哦,这个可是比较特殊的),其他变种的情况大家自己琢磨吧!!!
PPS:最后我还联想到,除了#testid .testclass中的空格所代表的子孙关系,还有~表示的兄弟关系、+表示的相邻兄弟关系、>表示的子元素关系。
补充:关于官方文档对这方面的一些说明(摘自:http://www.w3.org/TR/2011/REC-css3-selectors-20110929/)
类选择器的使用:
CSS examples:
We can assign style information to all elements with
or just
The following assigns style only to H1 elements with
Given these rules, the first
The following rule matches any
This rule matches when
如下css和html代码,你能说出哪块是啥颜色吗?(如果你看一眼就知道了,那么请随意~)
<style> #testid.testclass{ background: red; } #testid .testclass{ background: green; } </style>
<div id="testid" class="testclass" style="width:200px;height:200px;margin:0;"> <div class="testclass" style="width:100px;height:100px;margin:10px auto"> 内 </div>外 </div>
口说无凭,咱们程序员都是以实际测试为主,如下显示效果(其他html无关代码略)
对于#testid.testclass与#testid .testclass的区别,在我学习css的道路上并未遇到过,可能是因为我学的乱吧,但回头看看,自己琢磨下也是可以找到啥区别的,只是缺乏官方的解释(这个解释有空我去找找<偷懒了>,已经补充部分,见本文补充<文章末尾>)。
时间不多了,下面直接说下我的理解吧。
首先#testid.testclass,在id后紧跟点号和class的写法,那么表示是匹配id为testid的元素中再匹配class是testclass的元素。
最后#testid .testclass,在id后加空格然后跟上点号和class的写法,那表示匹配id为testid的元素,然后再在该元素的子孙元素中匹配class是testclass的元素。
PS:上面的#testid可以是其他如div标签、class(class前面要加点号哦,这个可是比较特殊的),其他变种的情况大家自己琢磨吧!!!
PPS:最后我还联想到,除了#testid .testclass中的空格所代表的子孙关系,还有~表示的兄弟关系、+表示的相邻兄弟关系、>表示的子元素关系。
补充:关于官方文档对这方面的一些说明(摘自:http://www.w3.org/TR/2011/REC-css3-selectors-20110929/)
Pattern | Meaning | Described | First defined in CSS level |
E F | an F element descendant of an E element | Descendant combinator | 1 |
E > F | an F element child of an E element | Child combinator | 2 |
E + F | an F element immediately preceded by an E element | Adjacent sibling combinator | 2 |
E ~ F | an F element preceded by an E element | General sibling combinator | 3 |
CSS examples:
We can assign style information to all elements with
class~="pastoral"as follows:
*.pastoral { color: green } /* all elements with class~=pastoral */
or just
.pastoral { color: green } /* all elements with class~=pastoral */
The following assigns style only to H1 elements with
class~="pastoral":
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
Given these rules, the first
H1instance below would not have green text, while the second would:
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
The following rule matches any
Pelement whose
classattribute has been assigned a list of whitespace-separated values that includes both
pastoraland
marine:
p.pastoral.marine { color: green }
This rule matches when
class="pastoral blue aqua marine"but does not match for
class="pastoral blue".
相关文章推荐
- CSS中#testid.testclass与#testid .testclass的区别
- DIV+CSS网页制作中CLASS和ID的区别
- div+css中id和class的区别运用详解
- css中id选择器和class选择器的区别?
- CSS中的class与id区别及用法
- html css中id和class的区别
- 【综合转贴】CSS “点 ”“井号”的含义and ID class区别?
- css中Class与ID的区别
- [CSS基础知识]CSS中Class与ID的区别
- css中id和class 的区别
- CSS-id选择器与class选择器的区别
- CSS中的class与id区别及用法
- 给补充点内容“css中,id与class的区别”
- [转]CSS中的class与id区别及…
- HTML、CSS里面关于 id、class、name 属性的区别和用法
- CSS “点 ”“井号”的含义and ID class区别
- CSS中Class与ID的区别,Margin与Padding的区别
- CSS中ID与CLASS的区别
- CSS “点 ”“井号”的含义and ID class区别
- html css中id和class的区别比较