Question

CSS样式中的>是什么意思？怎么解读以上代码？

.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
color: #ffffff;
background-color: transparent;
}
这个CSS样式中的>是什么意思？怎么解读以上代码？

Answer 1

使用>，比如div>p，就是表示选择父元素为 <div> 元素的所有 <p> 元素。
如果是空格，比如div p，就是选择 <div> 元素内部的所有 <p> 元素。两个意思是有不同的。
这里.navbar-inverse .nav > li > a:hover，就是表示 navbar-inverse类内部所有父元素为nav类的<li>元素的直接<a>子元素在鼠标经过时的样式
比如类似这样：<div class="navbar-inverse"><ul class="nav"><li><a href="#">selected</a></li></ul></div>

追问

有>和没有>用空格具体是什么区别呢？

追答

主要是看是否直接子元素，比如下面这段html
link

那么div a就会选中里面的元素，但是div>a就不会选中这个元素，因为这个元素是在元素内不但是不是的直接子元素

Answer 2

css 中的 〉 代表 直接子代选择器

举例说明：

假设有dom 结构如下

  <div id="div1">1
      <div id="div2">2
          <div id="div3">3</div>
          <div id="div33">33</div>
      </div>
      <div id="div22">22</div>
  </div>

2和22是1的直接子代

2，3，33，22是1的子代

选择器 #div1 >div 选择的就是 2和22

选择器 #div1 div 选择的就是 2，3，33，22

所以 ， > 表示选择前一标签的直接子代