CSS类别选择器加不加空格有什么区别?

html-css017

CSS类别选择器加不加空格有什么区别?,第1张

空格主要是为了区别不同的class类。如下示例:

<div class="one two tre"></div> <div class="onetwotre"></div>

在这个示例中,第一个div会被解析为有one、two、tre这三个类,第二个div会被解析为只有onetwotre这一个类。

CSS3 选择器 在CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)

比如下面这段代码:

<div class="aa bb">

     <p class="bb">

          <span class="bb"></span>

     </p>

</div>

选择器:.aa .bb

.aa和.bb间加上空格,是子选择器,选择.aa下含有.bb的子节点,子包括儿子节点、孙子节点,选择出的内容包括p.bb,span.bb

选择器: .aa.bb

.aa和.bb间无空格,是选择同一个元素,只不过选择器粒度更精细了些,选择的元素既有.aa类,也有.bb类,选择出的内容为:div.bb

选择器:.aa>.bb

.aa和.bb间加上大于号,也是子选择器,选择.aa下含有.bb的子节点,子只包括儿子节点,选择出的内容为p.bb