CSS媒體查詢不適用於子元素

Question

我不能通過CSS mediaqueries來解決子元素。 如何為大於800px的屏幕寬度設置下面示例中的列表元素的樣式？

小提琴

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

希望它會幫助你，在常規css代碼之后添加媒體查詢，

  @media only screen and (mix-width: 800px) {
           //add your css it may help you

 }

Answer 2

你應該在括號后擺脫分號。 Chrome不喜歡它們：

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

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

    .navigation > li{ 
        width: 20em; 
    }

}

小提琴： http ： //jsfiddle.net/wQu9j/2/