zoukankan      html  css  js  c++  java
  • CSS中定义CLASS时,中间有空格和每空格的区别

    css选择器的格式,规定不带空格的选择条件之间是“且”关系,带空格的是“父子”关系,并且可以是非直接的“父子”关系

     1 <style>
     2 .e1.e2
     3 {
     4 background-color:yellow;
     5 }
     6 .father .e3
     7 {
     8 background-color:green;
     9 }
    10 </style>
    11 </head>
    12 
    13 <body>
    14 <div class="father">
    15 <p class="e1 e2">我住在 Duckburg。</p>
    16 <p class="e3">我也住在 Duckburg。</p>
    17 <div><p class="e3">他也住在 Duckburg。</p></div>
    18 </div>
    19 </body>

    上面的代码中第一个段落p有两个class,e1和e2,注意,class属性的空格和css的空格不一个意思的,class属性的空格是“且”的关系,而刚说的css的空格是“父代与后代”的关系。

    第一个p被渲染为了黄色,是因为css用了.e1.e2的选择器给他设定了这个颜色,就是这个段落同时有这两个类。当然,css里面不用.e1.e2只用.e1也可以实现同样的效果,不过有些时候我们不希望css选择器误命中其它的标签,就这么细写了。

    第二p被.father .e3渲染为了绿色,是因为这p的class是e3,而且是class为father的标签的后代,所以被染为绿色。

    同理,第三个p,虽然不是father的直接子类,但同样变为绿色,说明这种带空格的选择器可以包含间接的后代。

  • 相关阅读:
    寒假补习记录_4
    寒假补习记录_3
    寒假补习记录_2
    寒假补习记录_1
    公文流转系统编程
    Javaweb编程
    转:在静态方法中访问类的实例成员
    Java字段初始化规律
    原码,反码,补码浅谈
    java第二节课课后
  • 原文地址:https://www.cnblogs.com/shierfen/p/5342326.html
Copyright © 2011-2022 走看看