如何將 css 與選擇器結合使用

Question

我需要清理我的 CSS 文件並刪除一些膨脹。 我知道可以通過用逗號分隔來組合類和 ID。 但是，當它們具有更復雜的選擇器（如下所示）時，我不確定如何將它們組合起來。

任何幫助，將不勝感激。 謝謝你。

body #gform_wrapper_14 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}
body #gform_wrapper_15 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}
body #gform_wrapper_17 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

或者

@media only screen and (min-width: 641px) {
    body #gform_wrapper_14 { 
      max-width: 80%;
      margin: 0 auto;
     }
    body #gform_wrapper_15 { 
      max-width: 80%;
      margin: 0 auto;
     }
    body #gform_wrapper_17 { 
      max-width: 80%;
      margin: 0 auto;
     }
    .hor-address {
        width:500px;
    }
}

說明：我有多個 #gform_wrapper_xx 對象（由第 3 方 Wordpress 插件生成），但我不想更改所有對象。 我只想改變這3個。

Answer 1

要不生成相同的 css 膨脹，請執行以下操作：

body .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

Answer 2

很簡單：

body #gform_wrapper_14 .gform_footer input[type=submit],
body #gform_wrapper_15 .gform_footer input[type=submit],
body #gform_wrapper_17 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

然后：

@media only screen and (min-width: 641px) {
    body #gform_wrapper_14,
    body #gform_wrapper_15,
    body #gform_wrapper_17 { 
      max-width: 80%;
      margin: 0 auto;
     }

    .hor-address {
        width:500px;
    }
}

Answer 3

您可以使用現代 sass(scss) 來清理代碼。 代碼將是：

body{
   #gform_wrapper_14{
      .gform_footer{
         input[type=submit] {
            border-radius:0px;
            background:#e89d53;
         }
      }
   }
   #gform_wrapper_15{
      @extend #gform_wrapper_14;
   }
   #gform_wrapper_17{
      @extend #gform_wrapper_14;
   }
}

Answer 4

由於您的所有目標元素都帶有前綴。 您可以使用屬性選擇器來減少冗余。 通過使用類似[id^="gform_wrapper_"]您基本上可以使用以gform_wrapper_開頭的 id 來定位所有元素

您可以在此處閱讀有關屬性選擇器的更多信息

 [id^="gform_wrapper_"] input[type=submit] { border-radius: 0px; background: #e89d53; }

 <div id="gform_wrapper_14"> <div class=".gform_footer"> <input type="submit"> </div> </div> <div id="gform_wrapper_15"> <div class=".gform_footer"> <input type="submit"> </div> </div> <div id="gform_wrapper_16"> <div class=".gform_footer"> <input type="submit"> </div> </div>