Question

我只想将自定义样式应用于特定div内的元素。我的意思是整个页面上有很多具有相同类的元素，我只想将这些自定义CSS应用于div内的元素，这些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>

仅将元素的样式设置为在特定div内

1 个答案: