為什么我的nth-child(n)無法選中元素
<section?class="gray-section"> ????<div?class="article-preview"> ????????<div?class="img-section"> ????????????<img?src="assets/pic01.jpg"/> ????????</div> ????????<div?class="text-section"> ????????????<h3>又一個標題</h3> ????????????<div?class="sub_heading">又一個子標題</div> ????????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?Amet?dolores?eveniet?nisi?reprehenderit ????????????????similique?suscipit?tempore.</p> ????????</div> ????</div> ????<div?class="article-preview"> ????????<div?class="text-section"> ????????????<h3>又一個標題</h3> ????????????<div?class="sub_heading">又一個子標題</div> ????????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?Amet?dolores?eveniet?nisi?reprehenderit ????????????????similique?suscipit?tempore.</p> ????????</div> ????????<div?class="img-section"> ????????????<img?src="assets/pic02.jpg"/> ????????</div> ????</div> ????<div?class="article-preview"> ????????<div?class="img-section"> ????????????<img?src="assets/pic03.jpg"/> ????????</div> ????????<div?class="text-section"> ????????????<h3>又一個標題</h3> ????????????<div?class="sub_heading">又一個子標題</div> ????????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?Amet?dolores?eveniet?nisi?reprehenderit ????????????????similique?suscipit?tempore.</p> ????????</div> ????</div> </section>
.gray-section{ ????background:?#30363e; } .gray-section:nth-child(odd){ ????background-color:rgba(255,255,255,.1); } .article-preview:after?{ ????content:?""; ????display:?block; ????clear:?both; } .img-section?{ ????width:?45%; ????font-size:0; } .img-section?img?{ ????width:?100%; } .text-section?{ ????position:?relative; ????top:?40px; ????left:?40px; ????width:?55%; ????letter-spacing:?1px; ????color:?#fff; } .text-section?>?*?{ ????max-width:?90%; } .text-section?.sub_heading?{ ????margin-top:?20px; } .article-preview?>?div?{ ????float:?left; }
查看chrome控制臺發現樣式沒有應用到元素上
2017-12-23
把樣式寫在標簽上是有效果的,用這個選擇器設置任何樣式都無效