1.选择器
偶数.index_tab:nth-child(even)
基数.index_tab:nth-child(odd)
最后一个.index_tab:last-child
第一个.index_tab:first-child
第几个:nth-child(1)
2. 遮罩
.mllc__master{
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
z-index:10;
background:rgba(0,0,0,0);
}
3. 伪元素
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
}
#div1::after {
content: "World";
color: white;
}
#div1:before{
content: "Hello";
color: white;
}
</style>
</head>
<body>
<div id="div1">111</div>
</body>
4.媒体查询
@media screen and (max-width: 1500px) {
}
5. 滚动条
.no_scroll::-webkit-scrollbar {
display: none;
}
.scrollbar::-webkit-scrollbar {
width: 6px;
height: 7px;
}
.scrollbar::-webkit-scrollbar-thumb {
background: rgba(160, 160, 160, 0.9);
border-radius: 0px;
scrollbar-highlight-color: blue;
}
.scrollbar::-webkit-scrollbar-track {
background: #f0f0f0;
}
6 超过显示省略号
6.1 单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
6.2 两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
7. calc
width: -moz-calc(100%);
width: -webkit-calc(100%);
width: calc(100%);
8. 图片hover显示文字
div:hover::after {
content: attr(data-title);
display: inline-block;
padding: 2px 4px;
border: 1px solid #ddd;
border-radius: 5px;
position: absolute;
top: 20px;
left: 0px;
background: #ddd;
cursor: pointer;
}
<div data-title="hello, world">hello...</div>
<img title="51312" src="https://images2017.cnblogs.com/blog/962554/201710/962554-20171019180820334-1614887402.jpg" alt="" />