#main > .images与#main .images

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
css中主要有一下几种选择器：

元素选择器
类选择器
ID 选择器
选择器分组
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器

那么怎么区别#main > .images与#main .images与#main, .images呢，最好是用代码来说话，这样会比较明显，以下代码用这三种不同的选择器会出现不同的结果。

<div id="main">
  <div class="images">
      <p>I am main`s son.</p>
  </div>
  <div class="main1">
      <div class="images">
          <p>I am main`s grandson.</p>
      </div>
  </div>
</div>
<div class="images">
   <p>I am images.</p>
</div>

#main > .images

带有 “ > ”符号，表明这是一个子元素选择器，则表明选择了main的子类images，即只会选择儿子，而不会选择孙子之类的。
使用 #main > .images{color: red;}，则显示为

#main .images

该选择器是后代选择器，则说明只要是main的后代images则都可以选择，即不光是儿子可以选择，孙子也可以选择。
就刚才的例子，若把改为使用#main .images{color: red;}，则显示结果为：

#main, .images

这就是选择器分组，“ ，”号表明是和的关系，即会选择所有id为main，class为images的元素。
就刚才的例子，若把改为使用#main，.images{color: red;}，则显示结果为：