css实用小技巧

Posted 2022-03-29 boyang1

覆盖是一种常用的策略，也是一种不太优雅的方式，如下代码，为了让每个house中间的20px的间距，但是第一个house不要有间距：

 

.house
    margin-top: 20px;

.house:first-child
    margin-top: 0;

复制代码

其实可以改成这样：

.house + .house
    margin-top: 20px;

复制代码

只有前面有.house的.house才能命中这个选择器，由于第一个.house前面没有，所以命不中，这样看起来代码就简洁多了。

还有这种情况，如下代码所示：

.request-demo input
    border: 1px solid #282828;

.request-demo input[type=submit]
    border: none;

复制代码

其实可以借助一个:not选择器：

.request-demo input:not([type=sbumit])
    border: 1px solid #282828;

复制代码

这样看起来代码也优雅了很多。