CSS中#testid.testclass与#testid .testclass的区别
来源:互联网 发布:陶瓷销售软件 编辑:程序博客网 时间:2024/05/16 05:08
在一些面试中常常会考到一些很奇怪但又比较基础的问题,就如本文所要讲述的css选择器使用上的一个细节。
如下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 H1
instance 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 P
element whose class
attribute has been assigned a list of whitespace-separated values that includes both pastoral
and marine
:
p.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine"
but does not match for class="pastoral blue"
.
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- CSS中#testid.testclass与#testid .testclass的区别
- Java:((TestClass)null).testMethod();
- 假设对testid有更新则插入一条新记录,那么怎么查询出testid最后的状态(分组查询)
- seleniuim面试题(testclass网)
- JUnit4.8.2源代码分析-3 TestClass 和RunnerBuilder
- CSS中#与.的区别
- css中id与css的区别
- error C2628: 'TestClass' followed by 'int' is illegal (did you forget a ';'?)
- 错误: 找不到或无法加载主类 com.wdg.auditproject.auditproject.action.TestClass
- CSS中 link与@import的区别
- CSS中ID与CLASS的区别
- css中visibility与display的区别
- CSS中visibility与display的区别
- css中Class与ID的区别
- css中ID与class的区别
- css 中Display 与Visibility 的区别
- css中em与px的区别
- CSS中margin与padding的区别
- 数据库三范式
- IISpeed
- day6 test09
- java设计模式之建造者模式
- vs2010和Matlab R2012b 混合编程
- CSS中#testid.testclass与#testid .testclass的区别
- Qgis 编译 1.7.0
- hdu 4557 非诚勿扰
- 将ResultSet结果集放在Result中进行处理
- QGIS二次开发第一讲
- 『精品素材』15套极好的高质量免费纹理
- document.documentElement.scrollTop || document.body.scrollTop;
- 计算1*1+1*2+2*3+3*4+4*5+5*6+6*7+7*8+8*9+9*10的值
- A*算法入门