码迷,mamicode.com
首页 > Web开发 > 详细

css实用小技巧

时间:2019-07-09 09:23:26      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:sub   bsp   方式   none   first   number   ble   选择   border   

覆盖是一种常用的策略,也是一种不太优雅的方式,如下代码,为了让每个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;
}
复制代码

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



css实用小技巧

标签:sub   bsp   方式   none   first   number   ble   选择   border   

原文地址:https://www.cnblogs.com/boyang1/p/11155209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!