css隐藏元素的方法-12个CSS中间方法总结

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

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

首先为每个菜单项添加边框

/* add border */
.nav li {
 border-right: 1px solid #666;
}

...然后再次删除最后一个元素...

//*去除边框*/

.nav li:last-child {
 border-right: none;
}

...可以使用 :not() 伪类直接应用于元素：

.nav li:not(:last-child) {
 border-right: 1px solid #666;
}

这样代码就干净、易于阅读、易于理解。

事实上css隐藏元素的方法，如果你的新元素有兄弟元素，你也可以使用通用兄弟选择器（~）：

..navli:第一个孩子~li{

 border-left: 1px solid #666;
}

将列宽添加到正文

您不需要为每个添加行高

，等待。 只需添加到正文：

body {
 line-height: 1;
}

这样文本元素就可以轻松地从正文继承。

垂直居中所有内容

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

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。

冒号分隔的列表

使 HTML 列表项看起来像一个真实的、以冒号分隔的列表：

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

对最后一个列表项使用 :not() 伪类。

选择第 n 个子项为负的项目

在 CSS 中使用负的第 n 个子级会选择第 1 项到第 n 项。

li {
 display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
 display: block;
}

就是这么简单。

使用 SVG 制作图标

我们没有理由不使用 SVG 来制作图标：

.logo {
 background: url("logo.svg");
}

SVG 可以很好地扩展到所有帧速率类型，并支持所有浏览器（直到 IE9）。 这可以避免使用 .png、.jpg 或 .gif 文件。

优化显示文字

有时字体在所有设备上看起来并非最佳，因此让设备浏览器帮助您：

html {
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

注意：请负责任地使用optimizeLegibility。 据悉，IE/Edge 不支持文本渲染。

对纯 CSS 滑块使用 max-height

具有最大高度和溢出隐藏的纯 CSS 滑块：

.slider ul {
 max-height: 0;
 overlow: hidden;
}
.slider:hover ul {
 max-height: 1000px;
 transition: .3s ease;
}

继承盒子大小

让 box-sizing 继承 html：

html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}

这使得更改插件或利用其他行为的其他组件中的框大小变得更加容易。

表格单元格宽度

表格工作非常麻烦，所以不要尝试使用 table-layout:fixed 来保持单元格的宽度相同：

.calendar {
 table-layout: fixed;
}

使用Flexbox摆脱外距离的各种hack

当你需要使用列分隔符时css隐藏元素的方法，你可以通过 flexbox 的 space- Between 属性摆脱第 n 个、第一个子元素和最后一个子元素的问题：

.list {
 display: flex;
 justify-content: space-between;
}
.list .person {
 flex-basis: 23%;
}

列表分隔符现在仅位于均匀间隔的位置。

对空链接使用属性选择器

当元素没有文本值但 href 属性有链接时显示链接：

a[href^="http"]:empty::before {
 content: attr(href);
}

相当方便。