html - CSS 媒体查询不适用于子元素

Question

我无法通过 CSS 媒体查询处理子元素。对于大于 800 像素的屏幕宽度，如何设置下面示例中列表元素的样式？

js fiddle

HTML

  <ul class="navigation">
    <li></li>
    <li></li>
    <li></li>
  </ul>

CSS

   .navigation > li{ display: block; width: 10em; };

@media screen and (min-width: 800px) {

.navigation > li{ width: 20em; };
}

Answer 1

你应该去掉大括号后的分号。 Chrome 不喜欢它们:

.navigation > li{ 
    display: block; 
    width: 10em; 
    background: red; 
    margin: 10px; 
}

@media screen and (min-width: 300px) {

    .navigation > li{ 
        width: 20em; 
    }

}

fiddle :http://jsfiddle.net/wQu9j/2/