首页 > 开发 > CSS > 正文

12个CSS高级技巧汇总

2024-07-11 08:29:39

字体：大中小

来源：转载

供稿：网友

1、使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

CSS Code复制内容到剪贴板

/* add border */ .nav li {
border-right: 1px solid #666; }
然后再除去最后一个元素……
//* remove border */ .nav li:last-child {
border-right: none; }
可以直接使用 :not() 伪类来应用元素： .nav li:not(:last-child) {
border-right: 1px solid #666; }

这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

CSS Code复制内容到剪贴板

.nav li:first-child ~ li { border-left: 1px solid #666;
}

2、给 body添加行高

你不需要分别添加 line-height 到每个 <p>，<h*>等。只要添加到 body 即可：

CSS Code复制内容到剪贴板

body { line-height: 1;
}

这样文本元素就可以很容易地从 body 继承。

3、所有一切都垂直居中

要将所有元素垂直居中，太简单了：

CSS Code复制内容到剪贴板

html, body { height: 100%;
margin: 0; }
body { -webkit-align-items: center;
-ms-flex-align: center; align-items: center;
display: -webkit-flex; display: flex;
}

看，是不是很简单。
注：在IE11中要小心flexbox。

4、逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

CSS Code复制内容到剪贴板

ul > li:not(:last-child)::after { content: ",";

上一篇：基于CSS3实现图片模糊过滤效果

下一篇：CSS实现五颜六色按钮组成的导航条效果代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注