我可以讓這個CSS更簡單，避免重複父選擇器嗎？

Question

一個常見的模式我遇到如下：

form.request input { 
    /* ... */ 
} 

form.request input[type="text"] { 
    /* ... */ 
} 

form.request select { 
    /* ... */ 
} 

form.request br { 
    /* ... */ 
} 

我有幾行相同的選擇（form.request）開始，我要選擇不同的孩子。我可以在沒有重複的情況下以更好的方式做到這一點（並且最好沒有像LESS這樣的附加依賴關係）？

相關的問題 - 如果所有的上述評論包含相同的風格，我可以做優於：

form.request input, form.request input[type="text"], form.request select, form.request br { 
    /* ... */ 
} 

Answer 1

不，你不能。但是如果你想減少輸入並使樣式表更具可讀性，請考慮使用SCSS。

Answer 2

使用LESS，這將讓你寫

form.request { 
    input { /* ... */ } 
    input[type="text"] { /* ... */ } 
    select { /* ... */ } 
    br { /* ... */ } 
} 

甚至

form.request { 
    input { 
    /* ... */ 
    &[type="text"] { /* ... */ } 
    } 
    select { /* ... */ } 
    br { /* ... */ } 
}