css - 仅为特定 div 内的元素设置样式

Question

我只想将我的自定义样式应用到特定 div 内的元素中。我的意思是整个页面上有许多具有相同类的元素，我只想将这些自定义 CSS 应用于 div 内的元素，数据属性如 div data-some-feature=...不适用于其余

     <div class="row" data-language>
      <section class="posts by-tags show-grid" data-language>
           <div class='right a'>a</div>
             <div class="row">';
               <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-right">
                 <div class="a">
                   <h6>apple</h6>
                   <p>some text...</p>
                 </div>
               </div>
             </div>
    </section>
      </div>

  <div class='row'>
    <section .....>
         ......
     </section>
   </div>

<style>
   div[data-dictionary-language].posts {
     //some style
     }
</style>

我只想使用 div[data-dictionary-language] 一次，然后应用我的自定义 CSS，如下所示:

   <style>
     div[data-dictionary-language]{
      .tags{
         //some style only apply to all elements are inside the specific div
        }
      .posts{
        //some style only apply to all elements are inside the specific div
       }
    }
   </style>

Answer 1

你快到了，像这样尝试:

/*     ___________ select the div with data-language attribute 
       |           ______ note the space here
       |          |    ________ select child of div[data-language] with class posts
 ______|________  | __|__                                                          */
div[data-language] .posts {
    background-color: orange;
}

<div class="row" data-language>
      <section class="posts by-tags show-grid" data-language>
           <div class='right a'>a</div>
             <div class="row">';
               <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-right">
                 <div class="a">
                   <h6>apple</h6>
                   <p>some text...</p>
                 </div>
               </div>
             </div>
    </section>
      </div>

  <div class='row'>
    <section .....>
         ......
     </section>
   </div>