新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> javascript >> CSS中#testid.testclass与#testid .testclass的区别

CSS中#testid.testclass与#testid .testclass的区别

查看次数3439 发表时间2013-05-24 23:48:13

在一些面试中常常会考到一些很奇怪但又比较基础的问题,就如本文所要讲述的css选择器使用上的一个细节。 如下css和html代码,你能说出哪块是啥颜色吗?(如果你看一眼就知道了,那么请随意~) <sty...

在一些面试中常常会考到一些很奇怪但又比较基础的问题,就如本文所要讲述的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".



(转发请注明转自:学PHP)    


  相关推荐




  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: